Javascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen-js-Tutorial-php.cn

Javascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen

黄舟

Freigeben： 2017-03-22 14:26:33

Original

1710 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Beispiel von Javascript vorgestellt, das den nahtlosen Bildlaufeffekt nach links und rechts mehrerer Bilder realisiert. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor an

Struktur: Box enthält ul, ul enthält 4 li, ul ist absolut positioniert.

Kopieren Sie li-1 und li-2 an das Ende von li-4. Um sie von li-1 und li-2 zu unterscheiden, wird der Inhalt in li-5 und li- geändert. 6, und die Farbe bleibt unverändert. Zu diesem Zeitpunkt enthält ul 6 li.

Es ist zu beachten, dass die große Box ul statt li verschoben wird.

Prinzip: Wenn der linke Wert der absoluten Positionierung von ul gleich der Breite von (li-1+li-2+li-3+li-4) ist, verwenden Sie Javascript, um schnell wiederherzustellen den linken Wert auf 0.

Bitte achten Sie zu diesem Zeitpunkt auf die Änderungen der Zahlen und Farben im Karton!

Rendering:

Javascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen

Beispielcode:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <p id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </p>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!