animate图片切换

来源：互联网发布：python shell是什么编辑：程序博客网时间：2024/05/21 10:54
可以实现简单的图片滑动切换效果，但是对于隔张图片的切换效果没有几张图片连动。例如，从图片1到图片4直接为1->4,而不是1->2->3->4滑动过去。
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title><style>.index{width:50px;height:25px;background-color:red;margin:5px;position:relative;cursor:pointer;float:left;}.index:hover{background-color:green;}#index1{background-color:green;}.img{position:absolute;left:-680px;}#img1{left:0;}.imgs{position:relative;width:680px;height:382px;overflow:hidden;}.pre,.next{background-color:blue;float:left;cursor:pointer;margin:10px;}.pre:hover,.next:hover{background-color:yellow;}</style><script src="jquery-1.11.1.min.js"/></script>    <script type="text/javascript">$(document).ready(function(){var i=2;////加载时默认显示第一张，所以要从第二张开始function test(){$(".img").css("left","-680px");if(i==1){$("#img4").css("left","0");$("#img4").stop(true).animate({left:"680px"});}else {$("#img"+(i-1)).css("left","0");$("#img"+(i-1)).stop(true).animate({left:"680px"});}$(".index").css("background-color","red");$("#index"+i).css("background-color","green")$("#img"+(i++)).stop(true).animate({left:"0px"});if(i==5) i=1;}var ii;ii=setInterval(test,2000);//鼠标悬浮触发function slide(num){$(".index").css("background-color","red");$("#index"+num).css("background-color","green")if(i==1) i=5;if(i!=num+1){if(i>num){$("#img"+(i-1)).css("left","0");$("#img"+(i-1)).stop(true).animate({left:"-680px"});$("#img"+num).css("left","680");$("#img"+num).stop(true).animate({left:"0px"});}else{$("#img"+(i-1)).css("left","0");$("#img"+(i-1)).stop(true).animate({left:"680px"});$("#img"+num).css("left","-680");$("#img"+num).stop(true).animate({left:"0px"});}}if(num!=4) i=num+1;else i=1;clearInterval(ii);}//鼠标悬浮图片暂停$(".img").hover(function(){clearInterval(ii);},function(){ii=setInterval(test,2000);});//鼠标悬浮1234选项$("#index1").hover(function(){slide(1);},function(){ii=setInterval(test,2000);});$("#index2").hover(function(){slide(2);},function(){ii=setInterval(test,2000);});$("#index3").hover(function(){slide(3);},function(){ii=setInterval(test,2000);});$("#index4").hover(function(){slide(4);},function(){ii=setInterval(test,2000);});//点击上一张、下一张$(".pre").click(function(){switch(i){ case 1:slide(3);break; case 2:slide(4);break;default:slide(i-2);} ii=setInterval(test,2000);});$(".next").click(function(){slide(i);ii=setInterval(test,2000);});});    </script></head><body><div class="imgs">    <img src="images/1.jpg"  id='img1' class="img" alt="111111" /><img src="images/2.jpg"  id='img2' class="img" alt="222222" /><img src="images/3.jpg"  id='img3' class="img" alt="333333" /><img src="images/4.jpg"  id='img4' class="img" alt="444444" /></div><div><div class="index" id="index1">11111</div><div class="index" id="index2">22222</div><div class="index" id="index3">33333</div><div class="index" id="index4">44444</div></div><div><div class="pre">上一张</div><div class="next">下一张</div></div></body></html>
0 0