Left and right seamless scrolling effect implemented by javascript-JS Tutorial-php.cn

Left and right seamless scrolling effect implemented by javascript

高洛峰

Release： 2017-01-18 13:39:56

Original

1344 people have browsed it

The example in this article describes the left and right seamless scrolling effect achieved by javascript. Share it with everyone for your reference, the details are as follows:

Today I introduce how to seamlessly scroll several pictures together. This is a commonly used js effect.

<!DOCTYPE HTML>
<html>
<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>
  <p id="scroll">
    <a href="javascript:;"></a>
    <a href="javascript:;"></a>
    <p>
      <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>
    </p>
  </p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById(&#39;scroll&#39;);
  var oUl = oDiv.getElementsByTagName(&#39;ul&#39;)[0];
  var aLi = oDiv.getElementsByTagName(&#39;li&#39;);
  var aBtn = oDiv.getElementsByTagName(&#39;a&#39;);
  var speed = -1;
  var timer = null;
  oUl.innerHTML += oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth * aLi.length + &#39;px&#39;;
  timer = setInterval(function(){
    oUl.style.left = oUl.offsetLeft + speed + &#39;px&#39;;
    if(oUl.offsetLeft < - oUl.offsetWidth / 2){
      oUl.style.left = &#39;0&#39;;
    }else if(oUl.offsetLeft > 0){
      oUl.style.left = - oUl.offsetWidth / 2 + &#39;px&#39;;
    }
  },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 + &#39;px&#39;;
      if(oUl.offsetLeft < -oUl.offsetWidth / 2){
        oUl.style.left = &#39;0&#39;;
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + &#39;px&#39;;
      }
    },30);
  };
};
</script>

Copy after login

PS: If you want to change the movement speed, you only need to change the value of speed.

I hope this article will be helpful to everyone in JavaScript programming.

For more articles related to the left and right seamless scrolling effect achieved by javascript, please pay attention to the PHP Chinese website!