最近閒的蛋疼，於是乎就做點立竿見影的事兒，歡迎拍磚，歡迎拍磚！
<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);
}
}