jQuery----banner图(图片循环播放)
自动轮播,可点击上一张下一张。效果如下:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>banner自动轮播</title> <style> .wrapper { width: 600px; height: 350px; /* border: 1px solid red; */ position: relative; } /* 5张图片叠加到一块 */ .wrapper img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; } .wrapper img:nth-of-type(1) { display: block; } /* 小圆点 */ .btn { width: 150px; display: flex; justify-content: space-around; position: absolute; left: 225px; bottom: 10px; z-index: 100; } .btn span { display: block; width: 10px; height: 10px; border: 3px solid white; border-radius: 50%; } /* 左右箭头 */ .wrapper a { text-decoration: none; font-size: 50px; color: rgb(149, 130, 130); position: absolute; top: 35%; } .wrapper a:nth-of-type(1) { left: 10px; } .wrapper a:nth-of-type(2) { right: 10px; } .active { background-color: rgb(150, 139, 139); } </style> </head> <body> <div class="wrapper"> <div class="contain"> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/3.jpg" alt="" /> <img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> </div> <div class="btn"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:void(0);"><</a> <a href="javascript:void(0);">></a> </div> <script src="js/jquery-1.3.2.min.js"></script> <script> var index = 0; // 点击上一张 $("a:first").click(function () { prev_pic(); }); // 点击下一张 $("a:last").click(function () { next_pic(); }); // 悬浮停止 $(".wrapper").mouseover(function () { clearInterval(id); }); $(".wrapper").mouseout(function () { autoplay(); }); // 下一张 function next_pic() { index++; if (index > 4) { index = 0; } addStyle(); } // 上一张 function prev_pic() { index--; if (index < 0) { index = 4; } addStyle(); } // 控制图片显示隐藏,小圆点背景色 function addStyle() { $("img").eq(index).fadeIn(); $("img").eq(index).siblings().fadeOut(); $("span").eq(index).addClass("active"); $("span").eq(index).siblings().removeClass("active"); } // 自动轮播 var id; autoplay(); function autoplay() { id = setInterval(function () { next_pic(); }, 3000); } </script> </body> </html>
参考出处
https://blog.csdn.net/qq_44971069/article/details/109708883