Heim > Artikel > Web-Frontend > So erstellen Sie einen Bildkarusselleffekt mit js

So erstellen Sie einen Bildkarusselleffekt mit js

PHP中文网Original: 2017-06-22 14:43:521694Durchsuche

In diesem Artikel wird hauptsächlich der Code zur Implementierung des js-Bildkarusselleffekts vorgestellt. Der Artikel erläutert jeden Schritt im Detail und weist auf Vorsichtsmaßnahmen hin, um den Weg für die reibungslose Implementierung des js-Bildkarusselleffekts zu ebnen Sie können auf

verweisen. Lassen Sie mich zunächst einen Blick auf den js-Bildkarusselleffekt werfen, wie unten gezeigt

Spezifische Ideen:

1. Laden Sie die Seite, rufen Sie den gesamten Container ab, alle li für numerische Indizes und ul für Bildlisten, definieren Sie Variablen für Timer und einen Variablenindex zum Speichern des Stroms Index
2. Fügen Sie einen Timer hinzu, erhöhen Sie den Index alle 2 Sekunden und rufen Sie die Bildwechselfunktion auf
Tipps:
1 Der Index kann nicht fortgesetzt werden unbegrenzt erhöhen. , müssen ein Urteil fällen
2. Beim Aufruf der Bildwechselfunktion müssen Sie den inkrementierten Index als Parameter übergeben
3. Definieren Sie die Bildwechselfunktion
Tipps:
1. Durchlaufen Sie alle Li mit numerischem Index und entfernen Sie die Klassen auf jedem Li.
2. Suchen Sie das entsprechende li entsprechend dem übergebenen Indexwert, fügen Sie eine Klasse hinzu und legen Sie es als aktuelles Highlight fest.
3. Berechnen Sie den obersten Wert von ul, an dem das Bild platziert wird, basierend auf dem übergebenen Indexwert
4. Ändern Sie den Wert von index so, dass er dem übergebenen Parameterwert entspricht
Hinweis: der oberste Wert von ul, wo das Bild platziert ist = -index*Höhe eines einzelnen Bildes (alle Bilder müssen die gleiche Höhe haben)
4. Wenn sich die Maus über den gesamten Container bewegt, hört das Bild auf zu wechseln, verlassen Sie es und fahren Sie fort
Tipps:
1. Löschen Sie den Timer, wenn die Maus über den gesamten Container gleitet.
2. Führen Sie den Timer weiter aus, wenn die Maus ihn verlässt, und wechseln Sie zum nächsten Bild
5. Durchlaufen Sie alle Li, die Zahlen enthalten, und fügen Sie ihnen Indizes hinzu. Wechseln Sie zum entsprechenden Bild, wenn die Maus darüber bewegt wird.
Wenn die Maus darüber gleitet, wird die Bildwechselfunktion aufgerufen und der Index des darüber gleitenden Li übergeben.
Der spezifische Code lautet wie folgt:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
 width:490px;
 margin:60px auto;
 overflow: hidden;
 position: relative;
 margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
 right:5px;
 bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;}
 .wrap ol .on{background:#E97305;
 color:#fff;}

 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById(&#39;wrap&#39;),
 pic=document.getElementById(&#39;pic&#39;).getElementsByTagName("li"),
 list=document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;li&#39;),
 index=0,
 timer=null;

 // 定义并调用自动播放函数
 timer = setInterval(autoPlay, 2000);

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

 // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 2000);
 }
 // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };

 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }

 // 定义图片切换函数
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }

 };

 </script> 
</head>
<body>
 <p class="wrap" id=&#39;wrap&#39;>
 <ul id="pic">
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li> 
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Bildkarusselleffekt mit js. 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：So verwenden Sie jQuery zum dynamischen Ändern von HyperlinksNächster Artikel：So verwenden Sie jQuery zum dynamischen Ändern von Hyperlinks

In Verbindung stehende Artikel

Mehr sehen