其实我本来想起个普通的标题叫js滚动动画思路。无奈我的js学得比jQuery少，而且我目前所学到的动画滚动思路仅限于三种。所以，下面将会讲到我目前学会的3种jQuery动画是如何构思和写出来的。 1.左右滚动 思路分析：使用相对定位，最外层的一个盒子使用相对定位，要滚动的盒子使用绝对定位。 <div><ul><li><a href="#"><img src="images/banner.jpg"></a></li> <li><a href="#"><img src="images/banner.jpg"></a></li> <li><a href="#"><img src="images/banner.jpg"></a></li> <li><a href="#"><img src="images/banner.jpg"></a></li> <li><a href="#"><img src="images/banner.jpg"></a></li> <li><a href="#"><img src="images/banner.jpg"></a></li> </ul></div> css可以这样子写 .banner{width:592px; height:160px; position:relative; overflow:hidden;} .bannerCon{position:absolute; left:0; top:0; width:2500px;} .bannerCon li{float:left; margin:10px 2px 0; padding:8px; display:inline;} jquery代码类似于这样子，就是通过控制滚动的时候定位到另外一屏要显示的位置，这时我们改动的就是left的值了。 我们可以求出外围。var width=$(".banner").width(); var index; 由触发的动作可以求出index的变化值。通过jQuery的animate. var index=1; var num =4; if(index==num){$(".bannerCon").animate({left:0});index=1;}else{ $(".bannerCon").animate({left:'-='+width}); index++;} 通过这个动作来改变内层盒子的左边位置，实现了动画的滚动，当然因为我们首先定位的内层盒子的left:0;所以在右边的内容向左滚动就是负值了。相信学过css的童鞋都懂的。 2.上下滚动 原理同上面，只不过，现在我们要求算的值不是外层盒子的宽度，而是它的高度。通过设置外层盒子的top:0;那么现在的盒子滚动的jQuery代码类似于 var index=1; var num =4; if(index==num){$(".bannerCon").animate({left:0});index=1;}else{ $(".bannerCon").animate({top:'-='+height;}); index++;} 3.淡入淡出滚动 这种使用的代码我认识有两种。一种是图片替换法，一种则是使用jQuery的另外一个动画slideUp和slideDown了。 第一种思路：这个是一个技巧来的，其实就是通过切换动画的时候改变图片的地址了。其实就是改变数字。图片的地址通常会这样子写，images/banner1.jpg,images/banner2.jpg.看懂了没，就是通过动画滚动的时候改变数字，不过这种方法比较有局限，不适合所有的类型，比如如果要添加的动画不止一个图片，还有其他文字和多个图片排列在一起也是不行的。 第二种思路：这种也是常用的，可能是切换的不会太突然吧。这种通常是切换动画的时候，把所有的内容slideUp，然后把需要出现的内容slideDown. <div> <div> <ul><li>1</li></ul> <ul><li>2</li></ul> </div> </div> *{margin:0; padding:0;} li{list-style:0 none;} .box{height:200px; width:400px; background:#FFF; position:relative; overflow:hidden} .inner{height:100%; position:absolute; top:200px; left:0;} .inner ul{height:200px; width:400px; background:#F00;} .inner ul.list{background:#0F0;} jQuery代码可以是这样。 var index; var num=4; if(index==num){ $(".inner").slideUp; $(".inner >ul:first").slideDown; }else{ $(".inner").slideUp; $(".inner > ul").eq(index).slideDown; index++; } 当然以上都是粗糙代码，具体例子肯定比这个复杂，这里我只是写出了自己学了一点知识分享，如果有错误的地方，还请指出，共同探讨。 锋利jQuery是一本牛书来的，我推荐如果你要学jQuery，那么这本书必须是第一本。
by 蔡宝坚
at 2013.1.8 广东中山