最近闲的蛋疼,于是乎就做点立竿见影的事儿,欢迎拍砖,欢迎拍砖!
?
<html> <head> <title>Jquery实现无缝滚动</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script language="javascript" src="jquery.js"></script> <script language="javascript" src="script.js"></script> </head> <body> <div> <div class="main"> <div class="roll" id="roll"> <div class="caption"><a href="http://www.baidu.com/" target="_blank">aaaaaaaaaaaaa</a></div> <div class="caption">bbbbbbbbbbbbb</div> <div class="caption">ccccccccccccc</div> <div class="caption">ddddddddddddd</div> <div class="caption">eeeeeeeeeeeee</div> <div class="caption">fffffffffffff</div> <div class="caption">ggggggggggggg</div> <div class="caption">hhhhhhhhhhhhh</div> <div class="caption">iiiiiiiiiiiii</div> <div class="caption">jjjjjjjjjjjjj</div> <div class="caption">kkkkkkkkkkkkk</div> <div class="caption">mmmmmmmmmmmmm</div> <div class="caption">nnnnnnnnnnnnn</div> </div> </div> </div> </body> </html>
?
*{ margin:0 0; padding:0px; } .main{ width:200px; height:200px; overflow:hidden; border:1px #666 solid; } .roll{ float:left; top:0px; } .caption{ height:20px; line-height:20px; margin-left:20px; }
??
$(document).ready(function(){ $("#roll").myRoll("slow"); }); /** * @description 无缝滚动插件版 * @param speed:滚动速度控制参数,字符串类型参数字符串支持为slow,normal,fast三种 * 数字类型参数范围是:1 ―― 100(数字越小滚动越快) * @author lsunwing * @date 2010/06/23 */ $.fn.myRoll = function(speed){ //滚动窗口的高 var rollHeight = this.parent().height(); //滚动条目数组 var rollArray = this.find("div"); //滚动条目数组个数 var number = rollArray.size(); //滚动条目的高 var height = rollArray.eq(0).height(); var obj = this; // 滚动速度控制 var range = 1; //滚动幅度 var interval = 10; //滚动时间间隔 if(speed){ if(typeof speed == "string"){ if(speed == "slow"){ interval = 100; }else if(speed == "normal"){ interval = 50; }else if (speed == "fast"){ interval = 10; }else{ range = 1; } }else if(typeof speed == "number"){ if(Math.ceil(speed) >= speed && Math.ceil(speed) <=100){ interval = Math.ceil(speed); }else{ interval = 100; } }else{ range = 1; interval = 100; } }else{ range = 1; interval = 100; } var top = 0; var flag = 0; //时间循环滚动 var timeId; if(number > rollHeight/height){ //开始滚动 timeId = setInterval(startRoll,interval); }else{ //内容高度小于滚动框的高度,不滚动 } //鼠标动作 $(this).hover( function(){ clearInterval(timeId); }, function(){ timeId = setInterval(startRoll,interval); } ); //滚动次数 var c = Math.ceil(height/range); function startRoll(){ flag++; if(flag >= c){ rollArray.eq(0).remove(); obj.append($(rollArray).eq(0)); //重新获得一下数组 rollArray = obj.find("div"); top = top + height; flag = 0; } top = top - range; obj.css("margin-top",top); } }
?