Native js implementiert ein automatisches Karusselldiagramm

Karussellbilder gehören heutzutage zu den häufigsten Effekten auf Website-Seiten und werden auf vielen Websites wie Taobao, JD.com usw. verwendet. Einige automatische Tabulatoren sind ebenfalls erforderlich und weisen eine hohe Wiederholgenauigkeit auf. Teilen Sie es hier und verwenden Sie den nativen js-Code, um die gemeinsamen Effekte von Karussellbildern zu erzielen!

Das Prinzip des Karussellbildes

Eine Reihe von Bildern gleicher Größe wird gekachelt, wobei das CSS-Layout verwendet wird, um nur ein Bild anzuzeigen und den Rest auszublenden. Verwenden Sie den Timer, um eine automatische Wiedergabe durch Berechnung des Offsets zu realisieren.

HTML-Layout

Zunächst speichert das übergeordnete Container-Banner den gesamten Inhalt und die untergeordnete Container-Bildliste speichert Bilder. Die Untercontainerliste speichert Schaltflächenpunkte. Ich habe ein Hintergrundbild für die Punkte verwendet!

<p id="banner">
    <ul id="img-list">  
       
        <li><img src="images/banner1.png" alt="1"/></li>
        <li><img src="images/banner2.jpg" alt="2"/></li>
        <li><img src="images/banner3.png" alt="3"/></li>

    </ul>
    <p id="list">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </p>
</p>

CSS-Änderung

1. Verständnis des Box-Modells, des Dokumentenflusses und der absoluten Positionierungsprobleme.

2. Bilder haben eine feste Breite und Höhe. Stellen Sie zunächst die Gesamtbreite der drei Bilder in der Bildliste ein und verbergen Sie den Überschuss mit „overflow: versteckt“! Laden Sie die Li-Einstellung unter dem Bild rechts und schweben Sie sie.

3. Legen Sie die Breite und Höhe des Listenbereichs fest und geben Sie ihm ein Hintergrundbild. Legen Sie für das erste Bild ein Standardbild mit gelben Punkten fest.

#banner {
    width:100%;
    padding:0;
    clear: both;
    position: relative;
    height: 400px;
    z-index:1;
}

#img-list {
    display: block;
    width:5760px;
    height: 400px;
    overflow: hidden;
    z-index:1;
    position: relative;
}
#img-list li{
    float: left;
    width:100%;
    height: 400px;
    overflow: hidden;
    /* position: absolute;
    top:0;
    left:0; */
    z-index: 2;
}
#list {
    width:100%;
    height:18px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    z-index: 100;
}
#list > span {
    width:18px;
    height: 18px;
    overflow: hidden;
    display: inline-block;
    margin:0 2px;
    background: url(../images/yuan.png);
    cursor: pointer;
}
#list .on {
    background: url(../images/huanyu.png);
}

JS-Effekt

Zuerst stellen wir die Autoplay-Funktion ein

2. Dann stoppt die Wiedergabe, wenn die Maus über den Container gleitet verlässt den gesamten Container. Spielen Sie mit dem nächsten.

3. Definieren und rufen Sie die Autoplay-Funktion auf

var banner=document.getElementById('banner');
  var imglist=document.getElementById('img-list').getElementsByTagName("li");
  var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
  var timer=null;
 //设置自动播放函数
  function autoPlay () {
      if (++index >= imglist.length) {index = 0};
      changeImg(index);
  }

  // 鼠标划过整个容器时停止自动播放
  banner.onmouseover = function () {
      clearInterval(timer);
  }

  // 鼠标离开整个容器时继续播放至下一张
  banner.onmouseout=function(){
      timer=setInterval(autoPlay,2000);
  }
  / 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);

Definieren Sie dann die Umschaltfunktion des Bildes

// 定义图片切换函数
  function changeImg (curIndex) {
      for (var i = 0; i < imglist.length; i++) {

          imglist[i].style.display = "none";
          list[i].className = "";
      }
      imglist[curIndex].style.display = "block";
      list[curIndex].className = "on";
  }

Abschließend durchlaufen Sie die gesamte digitale Navigation, um eine Wischumschaltung zu erreichen zum entsprechenden Das Bild muss seinen Indexwert erhalten

for (var i = 0; i < list.length; i++) {
  list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
 };

An diesem Punkt ist der gesamte Code für unser Karussell abgeschlossen!

Verwandte Empfehlungen:

Beispiel für die Entwicklung einer WeChat-Applet-Karusselldiagrammfunktion

jquery implementiert PC-seitigen Karusselldiagrammcode

Zwei js-Möglichkeiten zur Implementierung von Karussellbildern

Das obige ist der detaillierte Inhalt vonNative js implementiert ein automatisches Karusselldiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!