<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ 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; background-color: white; list-style: none; } .num li{ display: inline-block; 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top: 50%; /*left: 0;*/ 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: 0px; } .right{ right: 0px; } .outer:hover .btn{/*悬浮的时候显示左右*/ display: inline-block; } .num .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.jpg" alt=""></a></li> <li><a href=""><img src="123.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 src="jquery-3.3.1.min.js"></script><!--不加此句$不识别--> <script> var img_num= $(".img li").length; for(var i=0;i<img_num;i++) { $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active");//序列0加上类名active //手动轮播 $(".num li ").mouseover(function () { var index=$(this).index(); $(this).addClass("active").siblings().removeClass("active");//有无active //$(".img li").eq(index).show(1).siblings().hide() $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//fadein 和show功能相同都是显示，一个是淡出显示一个是直接显示 }); //自动轮播,红点移动 var i=0; var c=setInterval(GO_R,500);//5秒走一次 function GO_R() { i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500); } </script> </body> </html>