<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 500px; height: 500px; margin-top: 100px; margin-left: 290px; position: relative; } .img li{ position: absolute; list-style: none; top:0; left: 0; } .num{ position: absolute; bottom: 150px; left: 0; list-style: none; margin-left: 300px; } .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; width: 30px; height: 60px; background-color: grey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.3; margin-top:150px; display: none; } .outer:hover .btn{ display: block; } .left{ left: 0; } .right{ right: -290px; } .num .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="//img11.360buyimg.com/da/jfs/t4441/49/1784702367/91632/480f1bfc/58e60c72Nbe6e37f1.jpg" title="jd1" ></a></li> <li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4453/304/2090907070/122737/8821f7ec/58eb6de8Nd3a1b8fe.jpg" title="jd2" ></a></li> <li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4915/42/882494763/136605/c0df87b5/58e9ec51Na0becbb9.jpg" title="jd3" ></a></li> <li><a href=""><img src="//img14.360buyimg.com/da/jfs/t4924/166/986079800/154274/6832fccd/58eb6e6eNa2cf5872.jpg" title="jd4" ></a></li> <li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4576/37/1783288975/114963/5b28403c/58e600aaNf0a41c82.jpg" title="jd5" ></a></li> <li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4522/79/1905196885/120099/7f653940/58e768e9N021ccf82.jpg" title="jd6" ></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 src="jquery-3.2.0.js"></script> <script> //通过jq自动创建按钮标签 var num_img=$('.img li').length; for (i=0;i<num_img;i++){ $('.num').append('<li></li>') } $('.num li').eq(0).addClass('active'); //手动轮播 $('.num li').mouseover(function () { var index=$(this).index()//拿到当前下标索引值 $(this).addClass('active'); $(this).siblings().removeClass('active'); // $('.img li').eq(index).show(1).siblings().hide(1) $('.img li').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000) }); //自动轮播（设置定时器） var c=setInterval(go,1500); var i=0; function go() { if(i==num_img-1){ i=-1 } i++; $('.num li').eq(i).addClass('active'); $('.num li').eq(i).siblings().removeClass('active'); // $('.img li').eq(index).show(1).siblings().hide(1) $('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut() } // function go_l() { if(i==0){ i=num_img } i--; $('.num li').eq(i).addClass('active'); $('.num li').eq(i).siblings().removeClass('active'); // $('.img li').eq(index).show(1).siblings().hide(1) $('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut() } $('.outer').hover(function () { clearInterval(c) },function () { c=setInterval(go,1500); }) //button加定播 $('.right').click(go); $('.left').click(go_l) </script> </body> </html>