search

Home >Web Front-end >JS Tutorial >Left and right seamless scrolling effect implemented by javascript

Left and right seamless scrolling effect implemented by javascript

高洛峰
高洛峰Original
2017-01-18 13:39:561398browse

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of how to obtain the original width and height of an image using JavascriptNext article：Detailed explanation of how to obtain the original width and height of an image using Javascript

Related articles

See more