Heim > Artikel > Web-Frontend > Nahtloser Scrolleffekt nach links und rechts, implementiert durch Javascript

Nahtloser Scrolleffekt nach links und rechts, implementiert durch Javascript

高洛峰Original: 2017-01-18 13:39:561315Durchsuche

Das Beispiel in diesem Artikel beschreibt den durch Javascript erzielten nahtlosen Scrolleffekt nach links und rechts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Heute stelle ich vor, wie man mehrere Bilder nahtlos zusammenscrollt. Dies ist ein häufig verwendeter JS-Effekt.

<!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: Wenn Sie die Bewegungsgeschwindigkeit ändern möchten, müssen Sie nur den Geschwindigkeitswert ändern.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Weitere Artikel zum nahtlosen Scrolleffekt links und rechts, der durch Javascript implementiert wird, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung, wie man mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhältNächster Artikel：Ausführliche Erklärung, wie man mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhält

In Verbindung stehende Artikel

Mehr sehen