javascript实现的左右无缝滚动效果

2019-11-20 08:56:50

字体：大中小

来源：转载

供稿：网友

本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：

前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title>无缝滚动――左右</title>  <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>  <style type="text/css">  #scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;}  .btn_left{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat -70px -69px;position:absolute;top:20px;left:1px;z-index:1;}  .btn_left:hover{background:url(images/btn.jpg) no-repeat -70px 0;}  .btn_right{display:block;width:68px;height:68px;background:url(images/btn.jpg) no-repeat 1px -69px;position:absolute;top:20px;right:0;z-index:1;}  .btn_right:hover{background:url(images/btn.jpg) no-repeat 1px 0;}  #scroll .content{width:546px;height:108px;position:relative;overflow:hidden;margin:0 auto;}  #scroll ul{position:absolute;}  #scroll li{float:left;width:182px;height:108px;text-align:center;}  #scroll li a:hover{position:relative;top:2px;}  </style></head><body>  <div id="scroll">    <a href="javascript:;" class="btn_left"></a>    <a href="javascript:;" class="btn_right"></a>    <div class="content">      <ul>        <li><a href="#"><img src="images/1.jpg" width="178" height="108" alt=""/></a></li>        <li><a href="#"><img src="images/2.jpg" width="178" height="108" alt=""/></a></li>        <li><a href="#"><img src="images/3.jpg" width="178" height="108" alt=""/></a></li>        <li><a href="#"><img src="images/4.jpg" width="178" height="108" alt=""/></a></li>      </ul>    </div>  </div></body></html><script type="text/javascript">window.onload = function(){  var oDiv = document.getElementById('scroll');  var oUl = oDiv.getElementsByTagName('ul')[0];  var aLi = oDiv.getElementsByTagName('li');  var aBtn = oDiv.getElementsByTagName('a');  var speed = -1;  var timer = null;  oUl.innerHTML += oUl.innerHTML;  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';  timer = setInterval(function(){    oUl.style.left = oUl.offsetLeft + speed + 'px';    if(oUl.offsetLeft < - oUl.offsetWidth / 2){      oUl.style.left = '0';    }else if(oUl.offsetLeft > 0){      oUl.style.left = - oUl.offsetWidth / 2 + 'px';    }  },30);  aBtn[0].onclick = function(){    speed = -1;  };  aBtn[1].onclick = function(){    speed = 1;  };  oUl.onmouseover = function(){    clearInterval(timer);  };  oUl.onmouseout = function(){    timer = setInterval(function(){      oUl.style.left = oUl.offsetLeft + speed + 'px';      if(oUl.offsetLeft < -oUl.offsetWidth / 2){        oUl.style.left = '0';      }else if(oUl.offsetLeft > 0){        oUl.style.left = - oUl.offsetWidth / 2 + 'px';      }    },30);  };};</script>

PS：如果想要改变移动速度，只需要改变 speed 的值。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：Angular ng-class详解及实例代码

下一篇：javascript实现图片左右滚动效果【可自动滚动，有左右按钮】