<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul, ol { list-style: none; } .wrap { width: 650px; height: 250px; margin: 100px auto 0; position: relative; overflow: hidden; } .wrap img { display: block; } .wrap ul { height: 250px; z-index: 1; position: relative; } .wrap ol { height: 30px; z-index: 2; position: absolute; bottom: 0; right: 0; } .wrap > ul > li { position: absolute; top: 0; left: 650px; } .wrap > ol > li { float: left; width: 20px; height: 20px; text-align: center; line-height: 20px; border: 1px solid white; margin-right: 5px; background: Gray; } .wrap > ol > li:hover { cursor: pointer; } .wrap li.active { padding: 2px; color: orange; margin-top: -4px; border: 1px solid orange; } </style> <script> </script> </head> <body> <div class="wrap"> <ul> <li style="z-index:0;left:0;"><img src="images/01.jpg" alt=""/></li> <li><img src="images/02.jpg" alt=""/></li> <li><img src="images/03.jpg" alt=""/></li> <li><img src="images/04.jpg" alt=""/></li> <li><img src="images/05.jpg" alt=""/></li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script src="jquery-1.11.1.js"></script> <script type="text/javascript"> //大图使用定位，将其定位在右边,所以改变的是zIndex和left值 var timer = null; var index = 0; var $ulist = $("ul li"); var $olist = $("ol li"); timer = setInterval(auto,1500); function auto(){ index++; if(index == $olist.size()){ index = 0; } $olist.eq(index).addClass("active").siblings().removeClass("active"); $ulist.eq(index).animate({left : 0},1500,function(){ //运动完成后，将当前图片的zIndex设为0隐藏， //同时将其他图片的zIndex设为1，left值设为650px //这样当轮到某个图片时，使用动画将其left值设为0，因为其本身的zIndex为1，则将其显示出来 $(this).css("zIndex",0).siblings().css({zIndex : 1,left : 650}); }); } //鼠标移入移出事件 $olist.hover(function(){ clearInterval(timer); index = $(this).index() - 1; auto(); },function(){ timer = setInterval(auto,1500); }) </script>