<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../day48/jquery-3.2.1.js"></script> <title>Title</title> <style> .outer{ width: 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 18px; left: 270px; list-style: none; } .num li{ display: inline-block; width: 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top:50%; width: 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: -30px; display: none; } .left{ left: 0; } .right{ right: 0; } .outer:hover .btn{ display: block; } .num .active{ background-color: red; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="num"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script> var i=0; //功能1： 鼠标悬浮到图标的位置时实现切换 $(".num li").mouseover(function () { $(this).addClass("active").siblings().removeClass("active"); var $icon_index=$(this).index(); i=$icon_index; $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide") }); // 自动轮播 setInterval(fn,1000) function foo() { if(i==5){ i=-1 } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).removeClass("hide").siblings().addClass("hide"); } var ID=setInterval(foo,1000); // 悬浮终止定时器 $(".outer").hover(function () { // 终止定时器 clearInterval(ID) },function () { // 重新开启一个定时器 ID=setInterval(foo,1500); }); // 通过按钮实现切换 $(".right").click(function () { foo() }); function bar() { if(i==0){ i=6 } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).removeClass("hide").siblings().addClass("hide"); } $(".left").click(function () { bar() }) </script> </body> </html>
轮播图片文件 就去京东首页 右击 另存为吧