Heim > Artikel > Web-Frontend > Lassen Sie Bilder springen, Javascript-Bilderkarusselleffekte, Javascript-Fähigkeiten

Lassen Sie Bilder springen, Javascript-Bilderkarusselleffekte, Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:15:161666Durchsuche

Der Bildkarusselleffekt ist auf der Homepage der aktuellen Website fast ein Muss. Daher werde ich die einfache Umsetzung dieses Effekts unter drei Aspekten erläutern.

Das Bild springt
Implementierung der Bildsequenzsteuerung
Implementierung der vorderen und hinteren Tastensteuerung

In diesem Artikel schauen wir uns die Bilder an, die je nach Intervall wechseln.

Vervollständigen wir zuerst den Strukturcode, ich werde ihn nicht im Detail erklären. Sehen wir uns den Effekt an

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul,ol,li{
     list-style: none;
      margin: 0;
      padding: 0;
    }
    #slider{
      width: 800px;
      height: 300px;
      overflow: hidden;
      position: relative;
      margin: 0 auto;
    }
    #slider ul{
      width: 2400px;
      position: relative;
    }
    #slider ul:after{
      content: " ";
      width: 0;
      height: 0;
      display: block;
    }
    #slider ul li{
      float: left;
      width: 800px;
      height: 300px;
      overflow: hidden;
    }
    #slider ul li img{
      width: 100%;
    }
    #slider ol{
      position: absolute;
      bottom: 10px;
      left: 46%;
    }
    #slider ol li{
      display: inline-block;
    }
    #slider ol li a{
      display: inline-block;
      padding:4px 8px;
      border-radius:15px;
      background-color: #000;
      color: #fff;
    }
    #slider .prev, #slider .next{
      display: inline-block;
      position: absolute;
      top: 49%;
      background-color: #000;
      opacity: 0.6;
      color: #fff;
      padding: 3px;
    }
    #slider .prev{
      left: 10px;
    }
    #slider .next{
      right: 10px;
    }
  </style>
</head>
<body>
  
  <div id="slider">
    <ul>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
      <li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
    </ul>
    <ol>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
    </ol>
    <a href="#">上一张</a>
    <a href="#">下一张</a>
  </div>
</body>
</html>

Okay, jetzt steuern wir den Bildsprung über JS.

Zuerst müssen wir die Position des Bildes finden. Hier verwenden wir ul zum Layout, also müssen wir zuerst die Anzahl von LI unter UL finden

Dann werden die Bilder einzeln angezeigt. Dabei handelt es sich um den Maskenebenenmodus, ul ist die Szenerie außerhalb des Fensters und die Szenerie ul ist horizontal angeordnet

Dann wird die Außenszenerie in der Größe des Fensters angezeigt, d. h. jedes Bild wird als Szenerie jedes Fensters verwendet. Hier wird die Größe des Bildes auf die gleiche Größe wie das Fenster eingestellt.

Das Obige erklärt ein Konzept, nämlich die Layoutverarbeitung. Um unterschiedliche Anzeigeintervalle von Bildern zu erreichen, müssen wir setInterval oder setTimeout verwenden auf.)

Jedes Mal, wenn wir springen, steuern wir die linke Seite der UL-Position, sodass die Szenerie unter UL jedes Mal anders angezeigt werden kann, und diese linke Seite wird entsprechend der Breite des Fensters bestimmt. Das erste Bild ist natürlich links ist -800 * 0, der zweite ist -800*1, der dritte ist -800*2 ... und so weiter. Dann können wir den folgenden Code erhalten

<script>
   (function(){
     var slider = document.getElementById("slider");
     var imgul = slider.getElementsByTagName("ul")[0];
     var imglis = imgul.getElementsByTagName("li");
     var len = imglis.length;
     var index = 0;
     setInterval(function(){
       if(index >= len){
         index = 0;
       }
        imgul.style.left = - (800 * index) + "px";
        index++;
     },2000);
   })();
 </script>

Der JS-Code sieht ganz einfach so aus. Hier habe ich eine 2-Sekunden-Sprungsequenz festgelegt und dann, nachdem die Anzahl der Sprünge größer oder gleich der Anzahl der Bilder ist, zum ersten Bild zurückkehren lassen.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

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：Reiner JavaScript-Code zur Implementierung von Textvergleichstool_Javascript-FähigkeitenNächster Artikel：Reiner JavaScript-Code zur Implementierung von Textvergleichstool_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen