你的位置:首页 > Java教程

[Java教程]产品图片无缝水平滚动效果代码


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

<!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()有所了解。