<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播效果</title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ var oul = $('.wrap ul'); var ali = $('.wrap ul li'); var numli = $('.wrap ol li'); var aliWidth = $('.wrap ul li').eq(0).width(); var _now = 0; //这个是控制数字样式的计数器 var _now2 = 0; //这个是控制图片运动距离的计数器 var timeId = null; numli.click(function(){ var index = $(this).index(); _now = index; _now2 = index; $(this).addClass('current').siblings().removeClass('current'); oul.animate({'left':-aliWidth*index},500); }); //图片运动的函数 function slider(){ if(_now==numli.size()-1){ ali.eq(0).css({ 'position' : 'relative', 'left' : oul.width() }); _now = 0; }else{ _now++; }; _now2++; numli.eq(_now).addClass('current').siblings().removeClass('current'); oul.animate({'left':-aliWidth*_now2},500,function(){ if(_now == 0){ ali.eq(0).css('position','static'); oul.css('left',0); _now2 = 0; } }); }; timeId = setInterval(slider,1500); $('.wrap').hover(function(){ clearInterval(timeId); },function(){ timeId = setInterval(slider,1500); }); }); </script> <style> *{margin:0;padding:0;} li{list-style: none;} body{margin: 50px;} .wrap{ 500px; height:350px; border:3px solid #f90; margin: 0 auto; position: relative; overflow: hidden;} .wrap ul{ 2000px; position: absolute; left: 0; top:0;} .wrap ul li{float: left; 500px;} .wrap ol{position: absolute;bottom: 10px;right: 10px;} .wrap ol li{float: left; 16px; height: 16px; text-align: center; line-height: 16px; border:1px solid yellow; background: #000; color: #fff; margin-right:3px; cursor:pointer;} .wrap ol li.current{background: #fff; color: #000;} </style> </head> <body> <div class="wrap"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> </body> </html>
要记着把ul的overflow:hidden去掉，一开始测试的时候加上的，后来测试怎么都不对，最后发现时这个问题，要记牢了