写了个淡入的滚动例子,用的是jquery框 架,其实要把原理分析下:首先建立一个DIV,并给这个DIV设置宽度和溢出隐藏,然后在里面在建立一个DIV设置它的宽度宽点,然后给这个DIv里插入 你要滚动的,一个可以使用li来排列,然后滚动的时候用JS控制这个DIV的left值,让left-100px就是向左滚动了100px了,然后把滚动 出去的li插入到ul的最后面,在设置left为0,一直这样循环就达到了不间断滚动的效果。那么使用jquery操作起来会很简单并且方便的。

学习吧简单给出点代码,下面是html代码的结构。

不间断淡入滚动代码:

<div id="slideCon">
 <div id="slideCon2">
 <ul>
 <li><a href="#"><img src="images/page_b1.jpg" width="300" height="336" alt="hdeso"/></a></li>
 <li><a href="#"><img src="images/page_b2.jpg" width="550" height="280" alt="hdeso"/></a></li>
 <li><a href="#"><img src="images/page_b3.jpg" width="150" height="280" alt="hdeso"/></a></li>
 <li><a href="#"><img src="images/page_b4.jpg" width="200" height="280" alt="hdeso"/></a></li>
 <li><a href="#"><img src="images/page_b5.jpg" width="280" height="280" alt="hdeso"/></a></li>
 <li><a href="#"><img src="images/page_b6.jpg" width="220" height="280" alt="hdeso"/></a></li>
 </ul>
 </div>
 </div>

function s(){
 slide2.animate({"marginLeft":"-="+slide2.find("li:first").outerWidth(true)+"px"},500,function(){//找到第一个li的宽度并开始滚动,这样达到了自动适应宽度的效果
 var abc=$(this).find("li:first");//找到第一个li
 abc.hide(0);//隐藏它
 slide2.children("ul").append(abc);//把隐藏的li插入到ul的最后面
 slide2.css("marginLeft",0);//设置左边界为0
 if(slide2.find("li:visible").length<4){//如果可见的li小于4则淡入
 slide2.find("li:hidden:first").fadeIn(500)//让隐藏的第一个淡入
 }
 });
 }

然后一直执行这个s()就OK了。这个就是滚动了,下面做了个例子:无缝滚动,淡入,自适应宽度的jquery滚动 查看源文件即可,代码都有注释

发表于 2012年10月16日 15:55:40 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 15:55:40