直接切入正題

紅色表示要統一（所有的id）

演示地址：http://www.er-china.com/index.php?m=content&c=index&a=lists&catid=772

本框架為phpcms，大家可根據自己的框架更改循環。

<div class="rollBox">

???? <div class="LeftBotton" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="ISL_StopUp()"><img src="/tpl/03wrcd/img/leftbtn.png"></div>
????
???? <div class="Cont" id="ISL_Cont">
????????? <div class="ScrCont">
?????????????? <div id="List1">
??????????????? <!-- 圖片列表 begin -->
????{pc:content action="lists" catid="804" start="0" order="listorder asc,updatetime desc,id desc"}
????{loop $data $r}
???????????????? <div class="pic">
????????????????? <p><img src="{thumb($r[thumb],180,153)}"></p>{$r[title]}
???????????????? </div>
???? {/loop}
???????????????? {/pc}??
??????????????? <!-- 圖片列表 end -->
?????????????? </div>
?????????????? <div id="List2"></div>
????????? </div>
???? </div>
????
???? <div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"><img src="/tpl/03wrcd/img/rightbtn.png"></div>
????
</div>???????
???????
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//圖片滾動列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移動(px)
var PageWidth = 170; //翻頁寬度 調整滑動圖片大小
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);
?}
}
//--><!]]>
</script>?

轉載于:https://www.cnblogs.com/hshanghai/p/3412443.html

總結

以上是生活随笔為你收集整理的兼容各种浏览器的自动左右滚动兼左右点击滚动代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。