<script type="text/javascript"> $(document).ready( function() { //定义一个初始速度 var sudu = 600; var shangdi = false; //定义json var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"}; var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"}; var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"}; var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"}; var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"}; var nowimg = 2; var timer = setInterval(youanniuyewu,2000); $("#youku").mouseenter( function() { clearInterval(timer); } ); $("#youku").mouseleave( function() { clearInterval(timer); timer = setInterval(youanniuyewu,2000); } ); $(".you").click(youanniuyewu); function youanniuyewu(){ if(!$(".tuul li").is(":animated") || shangdi == true){ if(nowimg < 8){ nowimg ++; }else{ nowimg = 0; } $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); //先交换位置 $(".no1").animate(json0,sudu); $(".no2").animate(json1,sudu); $(".no3").animate(json2,sudu); $(".no4").animate(json3,sudu); $(".no0").css(json4); //再交换身份 $(".no0").attr("class","waiting"); $(".no1").attr("class","no0"); $(".no2").attr("class","no1"); $(".no3").attr("class","no2"); $(".no4").attr("class","no3"); //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 if($(".no3").next().length != 0){ //如果no3后面有人，那么改变这个人的姓名为no4 $(".no3").next().attr("class","no4"); }else{ //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 $(".tuul li:first").attr("class","no4"); } //发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： $(".no4").css(json4); } } $(".zuo").click( function(){ if(!$(".tuul li").is(":animated") || shangdi == true){ if(nowimg > 0){ nowimg --; }else{ nowimg = 8; } $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); //先交换位置: $(".no0").animate(json1,sudu); $(".no1").animate(json2,sudu); $(".no2").animate(json3,sudu); $(".no3").animate(json4,sudu); $(".no4").css(json0); //再交换身份 $(".no4").attr("class","waiting"); $(".no3").attr("class","no4"); $(".no2").attr("class","no3"); $(".no1").attr("class","no2"); $(".no0").attr("class","no1"); //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 if($(".no1").prev().length != 0){ //如果no1前面有人，那么改变这个人的姓名为no0 $(".no1").prev().attr("class","no0"); }else{ //no1前面没人，那么改变此时队列最后的那个人的名字为no0 $(".tuul li:last").attr("class","no0"); } $(".no0").css(json0); } } ); $("#youku .xiaoyuandian li").click( function(){ sudu = 100; //临时把这个速度变化一下 shangdi = true; //flag var yonghuandexuhao = $(this).index(); if(yonghuandexuhao > nowimg ){ var cishu = yonghuandexuhao - nowimg; console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次"); for(var i = 1 ; i<= cishu ; i++){ $(".you").trigger("click"); //让上帝帮你按一次又按钮 } }else{ var cishu = nowimg - yonghuandexuhao; console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次"); for(var i = 1 ; i<= cishu ; i++){ $(".zuo").trigger("click"); //让上帝帮你按一次又按钮 } } nowimg = yonghuandexuhao; sudu = 600; //再把速度恢复 shangdi = false; } ); } ); </script>
JQuery代码中关于定时器的控制，分页按钮的点击，这里我就不介绍了，如果感兴趣的话，请参照：JS & JQuery 里面的内容。
这里我主要说明两点：
1. json0, json1, json2, json3, json4数据的定义，其初始值与CSS上面定义的一致，它的目的就是用来方便的切换各个图片的绝对位置，下面我会详细介绍到。
2. 主要讲解右按钮点击事件，也就是youanniuyewu这个方法。
2-1） nowImg索引简单的处理：
if(nowimg < 8){ nowimg ++; }else{ nowimg = 0; }
如果不是最后一张，点击一下 "右按钮"， 则 nowImg值加1， 如果是最后一张，则nowImg从0开始。
2-2）点击一下 "右按钮"， 关于分页指示器的处理：
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
将当前显示的图片对应的指示器按钮高亮显示，兄弟节点普通显示。
2-3）交换图片位置：
//先交换位置 $(".no1").animate(json0,sudu); $(".no2").animate(json1,sudu); $(".no3").animate(json2,sudu); $(".no4").animate(json3,sudu); $(".no0").css(json4);