animate图片切换

最新推荐文章于 2021-08-03 14:13:18 发布

linqingyu310

最新推荐文章于 2021-08-03 14:13:18 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/linqingyu310/article/details/38584855

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

可以实现简单的图片滑动切换效果，但是对于隔张图片的切换效果没有几张图片连动。例如，从图片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>