JS特效——图片水平滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

具体源码如下：

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="关键字1,关键字2" />
<meta name="Description" content="描述信息" />
<title>水平循环滚动</title>

<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;display:block;}
#scrollBox{background: #FFF;margin:40px auto;overflow:hidden;border: 1px dashed #CCC;width: 500px;}
#scrollBox #con1,#scrollBox #con2{float:left;margin-left:10px;}
#innerdiv {float: left;width: 800%;} </style> </head>
<body>

<div id="scrollBox">
<div id="innerdiv">
<div id="con1">
<a href="#"><img src="1.jpg" height="120" width="192"></a>
<a href="#"><img src="2.jpg" height="120" width="192"></a>
<a href="#"><img src="3.jpg" height="120" width="192"></a>
<a href="#"><img src="4.jpg" height="120" width="192"></a>
<a href="#"><img src="5.jpg" height="120" width="192"></a>
<a href="#"><img src="6.jpg" height="120" width="192"></a>
<a href="#"><img src="7.jpg" height="120" width="192"></a>
<a href="#"><img src="8.jpg" height="120" width="192"></a>
<a href="#"><img src="9.jpg" height="120" width="192"></a>
</div>
<div id="con2"></div>
</div>
</div>
<script type="text/javascript">
var area =document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
area.scrollLeft=0;
function scrollUp(){
if(area.scrollLeft>=con2.offsetWidth){
area.scrollLeft=0;
}else{
area.scrollLeft+=5;
}
}
var time = 50;
var mytimer=setInterval(scrollUp,time);
area.onmouseover=function(){
clearInterval(mytimer);
}
area.onmouseout=function(){
mytimer=setInterval(scrollUp,time);
}
/*
var speed=10; //数字越大速度越慢
var tab=document.getElementById('scrollBox');
var tab1=document.getElementById('con1');
var tab2=document.getElementById('con2');
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
*/ </script>
</body></html>