suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen

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

黄舟
黄舟Original
2017-03-22 14:26:331678Durchsuche

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>

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!

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：Detaillierte Einführung in drei Möglichkeiten zum Löschen von Arrays in JavaScriptNächster Artikel：Detaillierte Einführung in drei Möglichkeiten zum Löschen von Arrays in JavaScript

In Verbindung stehende Artikel

Mehr sehen