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

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

　　效果图为：

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

　　<!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>

　　</body>

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

　　//图片滚动列表 glzy8.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>

教程首页更多教程