Verwenden Sie Arrays geschickt, um JS-Code für die Bildumschaltung zu erstellen-js-Tutorial-php.cn

Verwenden Sie Arrays geschickt, um JS-Code für die Bildumschaltung zu erstellen

高洛峰

Freigeben： 2016-12-03 14:49:27

Original

1153 Leute haben es durchsucht

Im vorherigen Artikel haben wir über die spezifischen Operationen von Arrays in JS gesprochen. Weitere Informationen finden Sie unter (Zusammenfassung verschiedener Operationen von Arrays in JS). Der Hauptzweck besteht heute darin, ein Array zu verwenden, um einfach zwischen linken und rechten Bildern zu wechseln.

Die spezifischen Schritte zum Bildwechsel in diesem Artikel sind wie folgt:

Schritt 1: Einfaches Layout und grundlegender Anzeigestil
Schritt 2: Erhalten Sie verwandte Elemente über js ;
Schritt 3: Speichern Sie die Bild-URL und die entsprechende Textbeschreibung über ein Array
Schritt 4: Initialisierung: einschließlich Initialisierung des Bildes, Anzeige von Bildnummern und Initialisierung des entsprechenden Textes usw.; 5: Klicken Sie auf die Schaltfläche, um Bilder zu wechseln und die entsprechende Funktion zu schreiben. Es handelt sich tatsächlich um eine einfache Anwendung von Arrays.

Implementierungscode:

<!DOCTYPE html> <br>
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>图片切换</title> 
 <style> 
 .box{ 
 width: 600px; 
 height:400px; 
 border: 10px solid #ccc; 
 position: relative; 
 margin: 40px auto 0; 
 } 
 .box a{ 
 width: 30px; 
 height: 30px; 
 background-color: #000; 
 border: 5px solid #fff; 
 position: absolute; 
 top:180px; 
 text-align: center; 
 font-size:25px; 
 font-weight: bold; 
 line-height: 30px; 
 color:#fff; 
 text-decoration: none; 
 filter: alpha(opacity:40); 
 opacity: 0.4; 
 } 
 .box a:hover{ 
 filter:alpha(opacity:80); 
 opacity:0.8; 
 } 
 .box #prev{ 
 left: 10px; 
 } 
 .box #next{ 
 right: 10px; 
 } 
 #text,#num{ 
 height: 30px; 
 line-height:30px; 
 width: 600px; 
 color:#fff; 
 position: absolute; 
 left: 0; 
 background-color: #000; 
 text-align: center; 
 filter: alpha(opacity:80); 
 opacity: 0.8; 
 margin:0; 
 } 
 .box #text{ 
 bottom: 0; 
 } 
 .box #num{ 
 top:0; 
 } 
 .box #img1{ 
 width: 600px; 
 height: 400px; 
 } 
 </style> 
 <script> 
 window.onload = function () { 
 var oPrev = document.getElementById("prev"); 
 var oNext = document.getElementById("next"); 
 var oText = document.getElementById("text"); 
 var oNum = document.getElementById("num"); 
 var oImg = document.getElementById("img1"); 
  
 var arrUrl = [&#39;images/1.jpg&#39;,&#39;images/2.jpg&#39;,&#39;images/3.jpg&#39;,&#39;images/4.jpg&#39;]; 
 var arrText = [&#39;文字1&#39;,&#39;文字2&#39;,&#39;文字3&#39;,&#39;文字4&#39;]; 
  
 //初始化 
 var num = 0; 
 function fnTab(){ 
 oNum.innerHTML = num + 1 + &#39;/&#39; + arrText.length; 
 oImg.src = arrUrl[num]; 
 oText.innerHTML = arrText[num]; 
 }; 
 fnTab(); 
 oPrev.onclick = function(){ 
 num --; 
 if( num == -1){ 
  num = arrUrl.length -1; 
 } 
 fnTab(); 
 }; 
 oNext.onclick = function(){ 
 num ++; 
 if(num == arrUrl.length){ 
  num = 0; 
 } 
 fnTab(); 
 }; 
 }; 
 </script> 
</head> 
<body> 
 <div class="box"> 
 <a id="prev" href="javascript:;"> < </a> 
 <a id="next" href="javascript:;"> > </a> 
 <p id="text">图片正在加载中……</p> 
 <span id="num">数量正在统计中……</span> 
 <img id="img1" src="../images/1.jpg" alt=""> 
 </div> 
</body> 
</html>

Nach dem Login kopieren

Dieses Beispiel ist sehr einfach. Es umfasst hauptsächlich das einfache Lesen und Schreiben von Arrays sowie das Lesen und Schreiben von HTML-Attributinhalten. Es ist zu beachten, dass wir beim Klicken auf das nächste Bild auf das letzte Bild oder auf das vorherige Bild auf das erste Bild klicken müssen. Andernfalls werden die Grenzen überschritten Fragen werden keinen Inhalt haben.