<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> * { margin: 0px; padding: 0px; /*会将ul中的padding变为0 将前面的小圆点挤入图片下*/ text-align: center; } li{ list-style-type: none; } .outer{ width: 440px; height: 220px; border: 5px dashed chartreuse; margin: 0 auto; position: relative; } .num{ position: absolute; left:50%; margin-left: -75px; bottom: 5px; font-size: 0px; } .num li{ height: 20px; width: 20px; background-color: darkgray; border-radius: 50%; vertical-align: center; line-height: 20px; display: inline-block; font-size: 16px; margin: 5px; cursor: pointer; /*float: left;*/ } .outer .img li{ position: absolute; top:0px; left:0px; float: left; } /*.outer .img:after{* 只对float有用/ /*content:'';*/ /*height:0px;*/ /*visibility: hidden;*/ /*display: block;*/ /*clear: both;*/ /*}*/ .button{ position: absolute; height: 60px; width: 40px; background-color: white; opacity: 0.5; line-height: 60px; font-size: 40px; top:50%; margin-top: -30px; font-weight: bold; display: none; } .btn_left{ left:10px; } .btn_right{ right:10px; } .outer:hover .button{ display: block; } .outer .num .current{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li> <img src="1.jpg"> </li> <li> <img src="2.jpg"> </li> <li> <img src="3.jpg"> </li> <li> <img src="4.jpg"> </li> <li> <img src="5.jpg"> </li> </ul> <ul class="num"> <li>1</li><!--换行时会出现一个占位符：解决方法：不换行或者font-size：0px--> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="btn_left button"> < </div> <div class="btn_right button"> > </div> </div> </body> </html> <script> <!--$()加载后自执行,同时也是一个私有域--> $(function(){ i=0; $(".num li").first().addClass('current'); $(".num li").mouseover(function(){ $(this).addClass("current").siblings().removeClass('current'); var index=$(this).index(); i=index; $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000); }); //定时器开始 var Id = setInterval(move,1500); function move() { i++; if(i==5) i=0; if(i<0) i=4; $(".num li").eq(i).addClass("current").siblings().removeClass('current'); $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000); } //定时器停止 hover相对于mouseover可以出现两个函数，入和出 不需要mouseout $(".outer").hover(function(){ clearInterval(Id); },function () { Id=setInterval(move,1500); }); $('.btn_left').click(function(){ i=i-2; move(); }); $('.btn_right').click(function(){ move(); }); }); </script>