javascript 不间断的图片滚动并可点击

css:

<style type="text/css"> 
.rollBox 
{ 
width: 704px; 
overflow: hidden; 
padding: 12px 0 5px 6px; 
} 
.rollBox .LeftBotton 
{ 
height: 52px; 
width: 19px; 
background: url(jt.gif) no-repeat 11px 0; 
overflow: hidden; 
float: left; 
display: inline; 
margin: 25px 0 0 0; 
cursor: pointer; 
background-color:Blue; 
color:White; 
} 
.rollBox .RightBotton 
{ 
height: 52px; 
width: 20px; 
background: url(jt.gif) no-repeat -8px 0; 
overflow: hidden; 
float: left; 
display: inline; 
margin: 25px 0 0 0; 
cursor: pointer; 
background-color:Blue; 
color:White; 
} 
.rollBox .Cont 
{ 
width: 663px; 
overflow: hidden; 
float: left; 
} 
.rollBox .ScrCont 
{ 
width: 10000000px; 
} 
.rollBox .Cont .pic 
{ 
width: 132px; 
float: left; 
text-align: center; 
} 
.rollBox .Cont .pic img 
{ 
padding: 4px; 
background: #fff; 
border: 1px solid #ccc; 
display: block; 
margin: 0 auto; 
} 
.rollBox .Cont .pic p 
{ 
line-height: 26px; 
color: #505050; 
} 
.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>

html代码

<div class="rollBox"> 
<div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"> 
<<<<< 
</div> <div class="Cont" id="ISL_Cont"> 
<div class="ScrCont"> 
<div id="List1"> 
<!-- 图片列表 begin --> 
<div class="pic"> 
<a href="####"> 
<img src="https://3water.com/images/logo.gif" width="109" height="87" /></a> 
<a href="####">商品1</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品2</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品3</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品4</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品5</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品6</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品7</a> 
</div> 
<!-- 图片列表 end --> 
</div> 
<div id="List2"> 
</div> 
</div> 
</div> 
<div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"> 
>>>>>> 
</div> 
</div>

JS代码

//速度(毫秒) 
var Speed = 10; 
//每次移动(px) 
var Space = 5; 
//每次翻页宽度 
var PageWidth = 132; 
//整体移位(px) 
var fill = 0; 
//是否自动移动，true 移动，false 不移动 
var MoveLock = false; 
//移动时间对象 
var MoveTimeObj; 
//上翻 下翻 变量，当comp小于0 为上翻动 反之为下翻动 
var Comp = 0; 
//上下移动对象 
var AutoPlayObj = null; 
//将div List1中的所有元素分配给 div list2中 
GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
//向左移动 
GetObj('ISL_Cont').scrollLeft = fill; 
//给div ISL_Cont 绑定鼠标移动在div上方时候的事件，该事件是清除自动播放的，当鼠标移动到div图片上时候将取消自动播放 
GetObj("ISL_Cont").onmouseover = function(){ clearInterval(AutoPlayObj); } 
//给div ISL_Cont 绑定鼠标移开div上方时候的时间，该事件是绑定自动播放的，当鼠标移开div图片上时候将又开始自动时间间隔自动播放 
GetObj("ISL_Cont").onmouseout = function(){ AutoPlay();} 
//第一次进来默认绑定为自动播放 
AutoPlay(); 
/* 
获取指定html对象 
*/ 
function GetObj(objName){ 
//判断当前页面中是否存在有效的元素标记,document.getElementById兼容火狐 
if(document.getElementById) 
{ 
return eval('document.getElementById("'+objName+'")') 
} 
else 
{ 
return eval('document.all.'+objName) 
} 
} 
/* 
自动滚动 
*/ 
function AutoPlay(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(AutoPlayObj); 
//重新绑定间隔时间滚动，setInterval()方法是绑定在指定的时间执行，clearInterval()方法是清除指定的时间绑定对象 
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); 
} 
/* 
上翻开始 
*/ 
function ISL_GoUp(){ 
//如过当前为自动播放将不执行下面代码 
if(MoveLock) 
return; 
//清除以前绑定的间隔时间滚动 
clearInterval(AutoPlayObj); 
MoveLock = true; 
//在指定的时间中自动往左侧移动 
MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
} 
/* 
上翻停止 
*/ 
function ISL_StopUp(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(MoveTimeObj); 
//判断当前论显图片的div做边的变距是否是第一个商品图片,不等于0不是第一个，反之等于第一张图片 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) 
{ 
//div左边距移动 
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
//开始移动 
CompScr(); 
}else 
{ 
MoveLock = false; 
} 
//自动播放 
AutoPlay(); 
} 
/* 
上翻动作 
*/ 
function ISL_ScrUp(){ 
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度 
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); 
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度 
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); 
} 
}