纯JavaScript手写图片轮播代码
废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js图片轮播切换</title>
<styletype="text/css">
.imgCon{width:400px;height:400px;border:2pxsolid#DCDCDC;margin:100pxauto;position:relative;}
.imgConspan{display:block;position:absolute;left:0px;width:100%;height:30px;background:#808080;text-align:center;font-size:18px;line-height:30px;}
.numStyle{top:0px;}
.textStyle{bottom:0px;}
.imgConstrong{font-size:30px;color:#000000;position:absolute;top:50%;display:block;background:gray;cursor:pointer;}
.imgCon.prev{left:10px;}
.imgCon.next{left:370px;}
img{width:400px;height:400px;}
</style>
</head>
<body>
<divclass="imgCon">
<spanid="numCon"class="numStyle">加载中...</span>
<spanid="textCon"class="textStyle">加载中...</span>
<strongid="prev"class="prev"><</strong>
<strongid="next"class="next">></strong>
<imgsrc=""id="imgChange"/>
</div>
<scripttype="text/javascript">
varnumCon=document.getElementById('numCon');
vartextCon=document.getElementById('textCon');
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
varimgChange=document.getElementById('imgChange');
varimgArr=['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];
varimgText=['第一张','第二张','第三张','第四张'];
varnum=0;
//数字图片变化函数
functionimgTab(){
numCon.innerHTML=num+1+'/'+imgArr.length;//数字变化
textCon.innerHTML=imgText[num];//底部文字内容变化
imgChange.src=imgArr[num];//图片变化
}
imgTab();
//下一张按钮
next.onclick=function(){
num++;
if(num==imgArr.length){
num=0;
}
imgTab();
}
//上一张按钮
prev.onclick=function(){
num--;
if(num==-1){
num=imgArr.length-1;
}
imgTab();
}
</script>
</body>
</html>
以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！