jQuery切换滑动效果

最新推荐文章于 2021-11-22 02:08:38 发布

luckystar2008

最新推荐文章于 2021-11-22 02:08:38 发布

阅读量101

点赞数

文章标签： jquery ViewUI

Js+Css+Html 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
	<script>
	$(document).ready(function(){  
		var index=0;  
		var len=$(".d span").length;  // 总共有多少个切换标签
		var wid=$(".txt").width(); // 每个要显示的内容的div的宽度
		$(".d span").click(function(){ // 对每个切换标签增加点击事件
			var index=$(this).index(); // 切换标签的id
			var wid2=-index*wid; // 往左移动的宽度，第一个不用移动，即移动的宽度是0；第2个移动的是第一个的宽度；第3个是第1，2个宽度的和；依此类推。。。
			if(!$(".c").is(":animated")){  
				// 动画向左移动，移动的最终结果是left:0px，
				// 比如第3个txt的宽度是1500px，要把它移动到第一个txt的位置，则移动的宽度是第1，2个的宽度和。
				// 这里因为设置的每个的宽度是相等的，因此是直接用的index*width;index从0开始（第一个不移动）。
				// 整体移动，.c下面有3个txt，同时移动指定的宽度，因为.b里面限制了每次只显示一个，因此除了要显示的那么，其他的都隐藏了。
				$(".c").css("position","relative").animate({left:wid2}); 
			}
		});
	});
</script>
<style>
	.b{width:500px;overflow:hidden}  /*宽度与txt保持一致，这样最开始只会显示一个div的内容*/
	.b .c{width:1500px;} /*3个txt的宽度*/
	.b .c .txt{width:500px;float:left;height:300px;} /*每个txt的宽度和高度*/
	.txt {border:1px solid blue;}
</style>
	<center>
			<div class="b">    
				<div class="c">       
					<div class="txt">11111111111</div>   
					<div class="txt">22222222222</div>       
					<div class="txt">33333333333</div>    
				</div>  
			</div>
		<div class="d">
			<span>1</span> 
			<span>2</span>
			<span>3</span>
		</div>
	</center>
</BODY>
</HTML>