废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;} .imgCon span{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;} .imgCon strong{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> <div> <span id="numCon">加载中...</span> <span id="textCon">加载中...</span> <strong id="prev"><</strong> <strong id="next">></strong> <img src="" id="imgChange"/> </div> <script type="text/javascript"> var numCon = document.getElementById('numCon'); var textCon = document.getElementById('textCon'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var imgChange = document.getElementById('imgChange'); var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg']; var imgText = ['第一张','第二张','第三张','第四张']; var num = 0; //数字 图片变化函数 function imgTab(){ 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手写图片轮播代码，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！
【纯JavaScript手写图片轮播代码】相关文章：