復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"><!--
//主要的滾動函數
//如果滾動的效果正好是需要的效果
//那麼你只需要直接調用這個函數即可
var moveTag=function(obj){
var _this = this;
_this.speed = 10;//移動的速度
_this.space = 10 * _this.speed;//移動間隔的時間
obj.scrollLeft=0;//初始化滾動的位置(主要是考慮到需要兼容FF)
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();//包含所有滾動列的div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
}
}
//得到需要滾動的所有列
//divList循環兩次的目的是為了不讓樣式名稱影響滾動代碼
//也就是盡可能的減少滾動代碼與樣式名稱的耦合
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);//需要滾動的所有列
}
}
_this.resetCellList=function(){
//這個函數主要是為了讓滾動不間斷
//在每次滾動到終點的時候需要使用
//將已經滾動過的列移到當前列之後
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
}
//重新獲取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
_this.resetForMoveRight=function(){
//這個函數主要是為了讓滾動不間斷
//與resetCellList的區別是這個函數是為了向右不間斷滾動使用的
//在每次滾動到起點的時候需要使用
//將當前列之後的所有列移動到當前列之前
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
}
}
//重新獲取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
//
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;//每次滾動需要滾動多少距離
var endScroll = obj2.offsetWidth - cellScroll;//計算滾動條的終點位置
//alert(_this.cellScroll);
//
_this.moveLength = cellScroll;//初始化移動偏量,為0的時候,在頁面加載完畢之後將會立即移動;等於_this.cellScroll表示延遲一會再開始執行
_this.scrollEnd = false;
_this.scrollTimes = 0;
//休息一會兒
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
}
};
_this.moveStart = true;//是否開始移動
_this.isMoveLeft = true;//是否向左移動
_this.move=function(){
obj.onmouseover=function(){
_this.moveStart=false;
};
obj.onmouseout=function(){
_this.moveStart=true;
};
//重新設定cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移動，並且已經移動到盡頭
if(_this.moveLength > 0) _this.moveLength = cellScroll;//調整
if(_this.cellList.length>0){
_this.resetCellList();//更新cellList
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
}
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移動，並且已經移動到盡頭
if(_this.moveLength > 0) _this.moveLength = cellScroll;//調整
if(_this.cellList.length>0){
_this.resetForMoveRight();//更新cellList
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
}
}
//
if(_this.scrollEnd){//向左移動
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
else{//向右移動
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
};
//自動
_this.start=function(){
setInterval(_this.move,_this.speed);
};
//右移動
_this.moveRight=function(){
_this.scrollEnd = true;//已經滾動到盡頭
_this.isMoveLeft = false;//向右滾動
_this.scrollTimes=0;
};
//左移動
_this.moveLeft=function(){
_this.scrollEnd = false;//沒有滾動到盡頭
_this.isMoveLeft = true;//向左滾動
_this.scrollTimes=0;
};
};
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style><!--
#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必須的屬性，寬度、高度可以自定義*/
#list div div{width:150px;height:30px;float:left;}/*必須的屬性，寬度、高度最好與#list的定義一樣*/
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/*必須的屬性，寬度、高度可以自定義*/
#list div div{width:150px;height:30px;float:left;}/*必須的屬性，寬度、高度最好與#list的定義一樣*/</style>
<title>無標題文檔</title>
</head>
<body>
<div id="list">
<div>
<div>第一列</div>
<div>第二列</div>
<div>第三列</div>
<div>第四列</div>
<div>第五列</div>
</div>
</div>
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移動</a>
<a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移動</a>
<script type="text/javascript"><!--
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;//滾動的速度,默認為10
//move.space=0;//滾動間隔時間,默認為滾動速度 * 16
//左移動只能移動到最左邊，無法一直向左移
//為了使滾動沒有間斷，所以最左邊的坐標是不斷變化的
//move.moveLeft();//這樣可以設置默認自右向左移動
//move.moveRight();//與move.moveLeft()反方向
var moveLeft=move.moveLeft;
var moveRight=move.moveRight;
//想要一個頁面上有N個地方滾動？
//沒問題！只需要多new幾個實例即可實現
// --></script>
</body>
</html>