写一个图片轮播效果的Demo(自动播放)附代码

﹏ヽ暗。殇╰゛Y 2022-07-14 22:16 200阅读 0赞

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon { width: 450px; height: 300px; border: 2px solid #DCDCDC; margin: 100px auto; position: relative; } .imgCon span { display: block; position: absolute; left: 0; width: 100%; height: 30px; background: #808080; text-align: center; font-size: 18px; line-height: 30px; } .numStyle { top: 0; } .textStyle { bottom: 0; } .imgCon strong { font-size: 30px; color: #000000; position: absolute; top: 50%; display: block; background: gray; cursor: pointer; } .imgCon .prev { left: 10px; } .imgCon .next { left: 425px; } img { width: 450px; height: 300px; } </style> </head> <body> 　　 <div class="imgCon"> 　　　　<span id="numCon" class="numStyle">加载中...</span> 　　　　<span id="textCon" class="textStyle">加载中...</span> 　　　　<strong id="prev" class="prev"><</strong> 　　　　<strong id="next" class="next">></strong> 　　　　<img src="" id="imgChange" class="imgChange"/> </div> <script language="JavaScript" src="jquery-2.2.3.js"></script> <script type="text/javascript"> $(document).ready(function () { var numCon = document.getElementById('numCon'); var textCon = document.getElementById('textCon'); 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]; //图片变化 } function nextPage() { num++; if (num == imgArr.length) { num = 0; } imgTab(); } var t; t = window.setInterval(nextPage, 1000); $("html").click(function (e) { //alert(e.target); if (e.target == $("#prev")[0]) { window.clearInterval(t); num--; if (num == -1) { num = imgArr.length - 1; } imgTab(); t = window.setInterval(nextPage, 1000); } else if (e.target == $("#next")[0]) { window.clearInterval(t); num++; if (num == imgArr.length) { num = 0; } imgTab(); t = window.setInterval(nextPage, 1000); } }); }); </script> </body> </html>