主要用到的几个JQUERY函数：
li:nth-child(2) 第二张图的意思；
attr() 方法设置或返回被选元素的属性值。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
先看代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带缩略图按钮控制图片左右滑动切换代码_js代码网</title> <meta name="keywords" content="带缩略图按钮控制图片" /> <meta name="description" content="jQuery带缩略图按钮控制图片左右滑动切换代码。" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="play" id="play"> <a href="javascript:" id="next">>><div class="nextImg"><img width="80" height="54" src="" /></div></a> <a href="javascript:" id="prev"><<<div class="prevImg"><img width="80" height="54" src="" /></div></a> <ol></ol> <ul> <li><a href="http://www.jsdaima.com/"><img src="images/1.jpg" alt="17素材1" /></a></li> <li><a href="http://www.jsdaima.com/"><img src="images/2.jpg" alt="17素材2" /></a></li> <li><a href="http://www.jsdaima.com/"><img src="images/3.jpg" alt="17素材3" /></a></li> </ul> </div> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ var oDiv = $("#play"); //外部盒子 var count = $("#play ul li").length; //内部图片数量 var countwidth = $("#play ul li").width(); //图片边框宽度 var oUl = $("#play ul").css("width",count*countwidth); //ul li总宽度 var now = 0; var next = $("#next"); var prev = $("#prev"); //点击按钮数量 for(var i = 0; i < count; i++){ $("#play ol").append("<li>" + Number(i+1) + "</li>"); $("#play ol li:first").addClass("active"); } //左右点击图片获取 var nI = $("#play ul li:nth-child(2)").find("img").attr("src");//nth-childer 函数 $(".nextImg img").attr("src",nI); var pI = $("#play ul li:last-child").find("img").attr("src"); $(".prevImg img").attr("src",pI); //按钮点击事件 var aBtn = $("#play ol li"); aBtn.each(function(index){ $(this).click(function(){ clearInterval(timer); tab(index); nextImg(); prevImg(); timer=setInterval(autoRun,2000); }); }); //图片循环事件 function tab(index){ now = index; aBtn.removeClass("active"); aBtn.eq(index).addClass("active"); oUl.stop(true,false).animate({"left":-countwidth * now},400); } //下一张按钮图片切换 function nextImg(){ var d = $("#play ul li").find("img").eq(now+1).attr("src"); var nI = $("#play ul li:nth-child(1)").find("img").attr("src"); $(".nextImg").find("img").attr("src",d); if(now==count-1){ $(".nextImg").find("img").attr("src",nI); } } //上一张图片按钮切换 function prevImg(){ var f = $("#play ul li").find("img").eq(now-1).attr("src"); $(".prevImg").find("img").attr("src",f); } //下一张点击事件 next.click(function(){ clearInterval(timer); now++; if(now==count){ now=0; } tab(now); nextImg(); prevImg(); timer=setInterval(autoRun, 2000); }); //上一张点击事件 prev.click(function(){ clearInterval(timer); now--; if(now==-1){ now=count-1; } tab(now); nextImg(); prevImg(); timer=setInterval(autoRun, 2000); }); //自动轮播定义 function autoRun(){ now++; if(now==count){ now=0; } tab(now); nextImg(); prevImg(); }; var timer=setInterval(autoRun, 2000); }); </script> </body> </html>
首先是一个大盒子，里面三张图片，然后显示的只是其他三分之一中间的位置，其他部分是被隐藏的，通过animate方法，从隐藏的地方把其他的拉出来
这段代码的核心就下面这句话了：
oUl.stop(true).animate({"left":-countwidth * now},400)
注意那个*now 时间是变的