jQuery切换滑动效果

来源：互联网发布：彩影软件丨编辑：程序博客网时间：2024/05/06 09:19
<!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(); // 切换标签的idvar 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>