有左右箭頭圖片輪播的JS代碼

作者：Eve Cole 更新時間：2025-02-23 05:00:03

輪播圖實現效果見下圖，圖片能自行輪播，點擊左右按鈕進行翻頁輪播，滑鼠懸停圖片或標題上，停止輪播；

效果圖為：

複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>有左右箭頭圖片輪播</title>

<!--

.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px solid red;}

.rollBox .LeftBotton{height:40px;width:21px;background:url(images/sl.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: pointer;}

.rollBox .RightBotton{height:40px;width:21px;background:url(images/sr.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: pointer;}

.rollBox .Cont{width:726px;overflow:hidden;float:left;}

.rollBox .ScrCont{width:10000000px;}

.rollBox .Cont .pic{width:242px;float:left;text-align:center;}

.rollBox .Cont .pic img{padding:9px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}

.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}

.rollBox .Cont .pic div span{display:block;}

.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}

.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}

.rollBox #List1,.rollBox #List2{float:left;}

-->

</style>

</head>

<body>

<div>

<div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

<div>

<div>

</div>

</div>

</div>

</div>

</body>

<![CDATA[//><!--

//圖片滾動清單VeVB.COm

var Speed = 1; //速度(毫秒)

var Space = 5; //每次移動(px)

var PageWidth = 726; //翻頁寬度

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(Left = GetObj('ISL_Cont').scrollLeft - GetObj(Lefty').scroll

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>

</html>