1.增加动态效果
在滚动区域外围包裹如下HTML
1 <div class="rollBox"> 2 <div class="Cont" id="ISL_Cont"> 3 <div class="ScrCont"> 4 <div id="List1"> 5 6 <!--滚动区域开始--> 7 ...... 8 <!--滚动区域结束--> 9 10 </div> 11 <div id="List2"></div> 12 </div> 13 </div> 14 </div> 15 16 <!--左右切换按扭结束--> 17 <a href="#" class="dirl" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></a> 18 <a href="#" class="dirr" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></a> 19 <!--左右切换按扭结束-->
新增css 样式（可以作为模板）
1 /*滚动样式*/ 2 .rollBox{width:1000px;overflow:hidden;} 3 .rollBox .Cont{width:1000px;overflow:hidden;float:left;} 4 .rollBox .ScrCont{width:10000000px;} 5 .rollBox #List1,.rollBox #List2{float:left;}
js文件
1 <!--//--><![CDATA[//><!-- 2 //图片滚动列表 mengjia 070816 3 var Speed = 1; //速度(毫秒) 4 var Space = 20; //每次移动(px) 5 var PageWidth = 1000; //翻页宽度 6 var fill = 0; //整体移位 7 var MoveLock = false; 8 var MoveTimeObj; 9 var Comp = 0; 10 var AutoPlayObj = null; 11 GetObj("List2").innerHTML = GetObj("List1").innerHTML; 12 GetObj('ISL_Cont').scrollLeft = fill; 13 GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 14 GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 15 AutoPlay(); 16 function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 17 function AutoPlay(){ //自动滚动 18 clearInterval(AutoPlayObj); 19 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间 20 } 21 function ISL_GoUp(){ //上翻开始 22 if(MoveLock) return; 23 clearInterval(AutoPlayObj); 24 MoveLock = true; 25 MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 26 } 27 function ISL_StopUp(){ //上翻停止 28 clearInterval(MoveTimeObj); 29 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ 30 Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 31 CompScr(); 32 }else{ 33 MoveLock = false; 34 } 35 AutoPlay(); 36 } 37 function ISL_ScrUp(){ //上翻动作 38 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} 39 GetObj('ISL_Cont').scrollLeft -= Space ; 40 } 41 function ISL_GoDown(){ //下翻 42 clearInterval(MoveTimeObj); 43 if(MoveLock) return; 44 clearInterval(AutoPlayObj); 45 MoveLock = true; 46 ISL_ScrDown(); 47 MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 48 } 49 function ISL_StopDown(){ //下翻停止 50 clearInterval(MoveTimeObj); 51 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ 52 Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 53 CompScr(); 54 }else{ 55 MoveLock = false; 56 } 57 AutoPlay(); 58 } 59 function ISL_ScrDown(){ //下翻动作 60 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} 61 GetObj('ISL_Cont').scrollLeft += Space ; 62 } 63 function CompScr(){ 64 var num; 65 if(Comp == 0){MoveLock = false;return;} 66 if(Comp < 0){ //上翻 67 if(Comp < -Space){ 68 Comp += Space; 69 num = Space; 70 }else{ 71 num = -Comp; 72 Comp = 0; 73 } 74 GetObj('ISL_Cont').scrollLeft -= num; 75 setTimeout('CompScr()',Speed); 76 }else{ //下翻 77 if(Comp > Space){ 78 Comp -= Space; 79 num = Space; 80 }else{ 81 num = Comp; 82 Comp = 0; 83 } 84 GetObj('ISL_Cont').scrollLeft += num; 85 setTimeout('CompScr()',Speed); 86 } 87 }