Js实现图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码:
在众多的网站都有这样的效果，那就是产品图片可以不间断的无缝滚动，效果挺美观的，也给静态的页面增加了几分动感，也便利了浏览者查看产品，算是比较好的效果吧，下面就介绍一下如何实现此特效的，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
float:left;
padding:5px;
}
ul li img{
width:160px;
height:100px;
}
#scroll{
width:800px;
overflow:hidden;
height:110px;
overflow:scroll;
}
#first,#second{
float:left;
width:1360px;
}
#parent{
width:2720px;
overflow:hidden
}
</style>
<script type="text/javascript">
window.onload=function(){
var speed=10;
document.getElementById("second").innerHTML=document.getElementById("first").innerHTML;
function done(){
if(document.getElementById("second").offsetWidth-document.getElementById("scroll").scrollLeft<=0){
document.getElementById("scroll").scrollLeft-=document.getElementById("first").offsetWidth;
}
else{
document.getElementById("scroll").scrollLeft++;
}
}
var MyMar=setInterval(done,speed);
document.getElementById("scroll").onmouseover=function (){clearInterval(MyMar)};
document.getElementById("scroll").onmouseout=function (){MyMar=setInterval(done,speed)};
}
</script>
</head>
<body>
<div id="scroll">
<div id="parent">
<div id="first">
<ul>
<li><img src="mytest/jQuery/scroll/img/1.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/2.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/3.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/4.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/5.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/6.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/8.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/9.jpg" /></li>
</ul>
</div>
<div id="second"></div>
</div>
</div>
</body>
</html>
以上代码实现了图片无缝滚动效果，下面简单介绍一下实现过程:
一.实现原理:将要滚动的图片队列复制一份放置于图片队列的末尾，然后让scroll的滚动条滚动起来，由于滚动图片队列后面跟着复制图片，这就就不会出现断层的感觉，否则就会出现以下状况:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
float:left;
padding:5px;
}
ul li img{
width:160px;
height:100px;
}
#scroll{
width:800px;
overflow:hidden;
height:110px;
overflow:scroll;
}
#first,#second{
float:left;
width:1360px;
}
#parent{width:2720px;}
</style>
<script type="text/javascript">
window.onload=function(){
var speed=10;
function done(){
if(document.getElementById("first").offsetWidth-document.getElementById("scroll").scrollLeft<=0){
document.getElementById("scroll").scrollLeft-=document.getElementById("first").offsetWidth;
}
else{
document.getElementById("scroll").scrollLeft++;
}
}
var MyMar=setInterval(done,speed);
document.getElementById("scroll").onmouseover=function (){clearInterval(MyMar)};
document.getElementById("scroll").onmouseout=function (){MyMar=setInterval(done,speed)};
}
</script>
</head>
<body>
<div id="scroll">
<div id="parent" style="overflow:hidden">
<div id="first">
<ul >
<li><img src="mytest/jQuery/scroll/img/1.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/2.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/3.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/4.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/5.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/6.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/8.jpg" /></li>
<li><img src="mytest/jQuery/scroll/img/9.jpg" /></li>
</ul>
</div>
</div>
</div>
</body>
</html>
由以上代码的表现可以看出，如果没有增加后面的复制图片列表，那么就会出现断层现象。同时也可以看出，当图片列表滚动完成之后（这个时候复制图片队列第一张图片恰好位于图片开始滚动的位置），会重置图片列表原来的状态，再重头开始滚动，同样是因为后面有复制图片队列的缘故，所以不会感觉到重置状态而是不间断滚动的感觉。
说明:为了便于观察和理解，将scroll对象的 overflow属性值设置为scroll，实际应用中改为hiiden即可。
二.以下是对代码的解释:
1.var speed=10;设置滚动速度。setInterval(done,speed)，这样每隔10毫秒就会执行一次done()函数。
2.document.getElementById("second").innerHTML=document.getElementById("first").innerHTML用来复制图片队列。
3.done()函数中，if(document.getElementById("second").offsetWidth-document.getElementById("scroll").scrollLeft<=0)用来判断第一个图片队列是否已经完成滚动完成，如果滚动完成，那么重置图片队列。offsetWidth可以获得对象的宽度，scrollLeft可以获得scroll对象向左滚动的长度，所以如果first对象的长度减去scroll对象向左滚动的长度小于等于零，那么就说明第一个图片队列滚动完成了，如果没有滚动完成的话，则继续滚动。
4.document.getElementById("scroll").onmouseover=function (){clearInterval(MyMar)}的作用是当鼠标放在滚动图片上的时候，停止滚动，需要对clearInterval()有所了解。
5.document.getElementById("scroll").onmouseout=function (){MyMar=setInterval(done,speed)}的作用是当鼠标离开滚动图片的时候，继续滚动，需要对setInterval()有所了解。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢