带左右箭头图片轮播的JS代码

轮播图实现效果见下图，图片能自己轮播，点击左右按钮进行翻页轮播，鼠标悬停图片或者标题上，停止轮播；

效果图为：

复制代码代码如下:

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

< html xmlns="http://www.**w*3.org/1999/xhtml" >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >带左右箭头图片轮播< /title >

< style type="text/css" >

< !--

.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 onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" >< /div >

< div id="ISL_Cont" >

< div >

< div id="List1" >

< !-- 图片列表 begin -- >

< div >

< a href="/" target="_blank" >< img src="images/1.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/2.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/3.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/4.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/5.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/6.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/7.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< div >

< a href="/" target="_blank" >< img src="images/8.jpg" / >< /a >

< div >

< span >< a href="//www.VeVB.COm/" target="_blank" >酷站代码-特效1< /a >< /span >

< span >45446547< /span >

< /div >

< /div >

< !-- 图片列表 end -- >

< /div >

< div id="List2" >< /div >

< /div >

< /div >

< div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" >< /div >

< /div >

< /body >

< script language="javascript" type="text/javascript" >

< !--//-- >< ![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('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 >

< /html >