产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码:在众多的网站都有这样的效果，那就是产品图片可以不间断的无缝滚动，效果挺美观的，也给静态的页面增加了几分动感，也便利了浏览者查看产品，算是比较好的效果吧，下面就介绍一下如何实现此特效的，代码实例如下:
<!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()有所了解。