图文 翻滚 js 代码

2012年4月2日 发表评论 阅读评论

<!–//–><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 210; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
 clearInterval(AutoPlayObj);
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
 GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
 clearInterval(MoveTimeObj);
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 ISL_ScrDown();
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
 GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
 var num;
 if(Comp == 0){MoveLock = false;return;}
 if(Comp < 0){ //上翻
  if(Comp < -Space){
   Comp += Space;
   num = Space;
  }else{
   num = -Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft -= num;
  setTimeout('CompScr()',Speed);
 }else{ //下翻
  if(Comp > Space){
   Comp -= Space;
   num = Space;
  }else{
   num = Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft += num;
  setTimeout('CompScr()',Speed);
 }
}

//--><!]]>

 

// 样式

<style>
.rollBox {
    overflow: hidden;
    padding: 10px 0 0 6px;
    width: 677px;
}

.rollBox .LeftBotton {
    background: url(“../../images/index/h_scroll_left.gif”) no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: left;
    height: 52px;
    margin: 10px 0 0;
    width: 13px;
}
.rollBox .RightBotton {
    background: url(“../../images/index/h_scroll_right.gif”) no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: left;
    height: 44px;
    margin: 10px 0 0;
    width: 13px;
}
.rollBox .Cont {
    float: left;
    overflow: hidden;
    width: 630px;
}
.rollBox .ScrCont {
    width: 10000px;
}
.rollBox #List1, .rollBox #List2 {
    float: left;
}
.rollBox_list {
    float: left;
    padding: 0 5px;
    width: 200px;
}
</style>

//html

<div class=”rollBox”>
    <div class=”LeftBotton” onmousedown=”ISL_GoUp()” onmouseup=”ISL_StopUp()” onmouseout=”ISL_StopUp()”></div>
    <div class=”Cont” id=”ISL_Cont”>
        <div class=”ScrCont”>
            <div id=”List1″>
                <!– 图片列表 begin –>
                <div class=”rollBox_list”>
                    adfadfadfasf
                </div>
                <div class=”rollBox_list”>
                    adfadfadfasf
                </div>
                <div class=”rollBox_list”>
                    adfadfadfasf
                </div>

                <!– 图片列表 end –>
            </div>

            <div id=”List2″></div>
        </div>
    </div>
    <div class=”RightBotton” onmousedown=”ISL_GoDown()” onmouseup=”ISL_StopDown()” onmouseout=”ISL_StopDown()”></div>
</div>


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/120.html

  1. 本文目前尚无任何评论.