1.项目预览地址：
http://study.zyjblogs.cn/project/lunbo.html
2.上图
3.上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } ul, li { list-style: none; } #banner { border: solid 5px pink; width: 520px; overflow: hidden; margin: 100px auto; position: relative; } .imgs { width: 2600px; border: solid 1px black; } .imgs li { float: left; } .imgs li img { width: 520px; } .cursor { width: 30px; height: 50px; background: rgb(0, 0, 0, 0.3); position: absolute; top: 110px; color: white; font-size: 25px; font-weight: bold; text-align: center; line-height: 50px; cursor: pointer; } .cursor:hover { background: rgb(0, 0, 0, 0.6); } .pre { left: 0px; } .next { right: 0px; } .dots { position: absolute; width: 100px; left: 200px; bottom: 10px; border: solid 1px pink; overflow: hidden; padding: 5p 10px; } .dots li { float: left; width: 10px; height: 10px; background: white; border-radius: 5px; margin: 5px 5px; } .active { background: pink!important; } </style> </head> <body> <div id="banner"> <ul class="imgs"> <li class="item"><img src="http://study.zyjblogs.cn/web/img/1.webp" alt=""></li> <li class="item"><img src="http://study.zyjblogs.cn/web/img/2.jpg" alt=""></li> <li class="item"><img src="http://study.zyjblogs.cn/web/img/3.jpg" alt=""></li> <li class="item"><img src="http://study.zyjblogs.cn/web/img/4.jpg" alt=""></li> <li class="item"><img src="http://study.zyjblogs.cn/web/img/5.webp" alt=""></li> </ul> <div class="cursor pre"><</div> <div class="cursor next">></div> <ul class="dots"> <li class="btn active"></li> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> </ul> </div> <script type="text/javascript" src="http://study.zyjblogs.cn/web/js/jquery-3.5.1.min.js"></script> <script> var index = 0; var timer = setInterval("next()", 3000); $("img").mouseover( function() { clearTimeout(timer); } ) $("img").mouseout( function() { clearTimeout(timer); timer = setInterval("next()", 3000); } ) $(".dots .btn").mouseover( function() { index = $(this).index(); //获取点击元素的下标 $(this).addClass("active").siblings().removeClass("active"); $(".item").eq(index).fadeIn().siblings().fadeOut(); clearTimeout(timer); } ) $(".dots .btn").mouseout( function() { index = $(this).index(); //获取点击元素的下标 $(this).addClass("active").siblings().removeClass("active"); $(".item").eq(index).fadeIn().siblings().fadeOut(); clearTimeout(timer); timer = setInterval("next()", 3000); } ) function play() { // var offset = index * (-520) + "px"; // $(".imgs").animate({ // "margin-left": offset // }, 1000) $(".item").eq(index).fadeIn().siblings().fadeOut(); $(".dots li").removeClass("active").eq(index).addClass("active"); } function next() { index++; if (index == 5) index = 0; play(); } function pre() { index--; if (index == -1) index = 4; play(); } $(".next").click(next); $(".pre").click(pre); </script> </body> </html>
