您所在的位置:小祥子 » 编程 » JavaScript » 正文

产品图片无缝水平滚动效果代码

时间:2015-07-09 编辑:一落叶而知秋 来源:CnBlogs

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

<!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="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/1.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/2.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/3.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/4.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/5.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/6.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/8.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/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="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/1.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/2.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/3.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/4.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/5.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/6.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/mytest/jQuery/scroll/img/8.jpg" /></li>
          <li><img src="http://www.cnblogs.com/softwhy/p/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()有所了解。