Dieser Artikel teilt den spezifischen Code für die Verwendung von JS, um Karusselleffekte auf die Homepage allgemeiner Websites für Ihre Referenz zu erstellen. Der spezifische Inhalt ist wie folgt
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> bild karousel </title> <style> .warp {width: 600px; Höhe: 750px; Position: Relativ; Rand: 30px Auto 0; Überlauf: versteckt; } #box {width: 600px; Höhe: 750px; Position: absolut; Oben: 0px; links: 0px; Überlauf: versteckt; /*Überlauf-x: auto;*/} #Box #con {width: 6000px; Höhe: 750px; Überlauf: versteckt; } #con img {float: links; Breite: 600px; Höhe: 750px; } #Btnl {Position: absolut; links: 0px; Oben: 366px; Breite: 36px; Höhe: 36px; Hintergrund: URL (Bilder/btnl.png) 0 0 No-Repeat; Cursor: Zeiger; } #Btnr {Position: absolut; Rechts: 0px; Oben: 366px; Breite: 36px; Höhe: 36px; Hintergrund: URL (Bilder/btnr.png) 0 0 No-Repeat; Cursor: Zeiger; } #num {Position: absolut; unten: 10px; Links: 148px; Überlauf: versteckt; Listenstil: Keine; } #num li {float: links; Rand: 0 5px; Schriftgröße: 16px; Zeilenhöhe: 25px; Höhe: 25px; Breite: 25px; Hintergrund: #CCC; Text-Align: Mitte; Cursor: Zeiger; } #num li.select {Hintergrundfarbe: grün; Farbe: weiß; " src="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> </div> <div id="btnL"></div> <div id="btnR"></div> <ul id="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li> 5 </li> <li> 6 </li> </div> <script> var box = document.getElementById ('box'); var con = document.getElementById ('con'); var imgs = con.getElementsByTagName ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var btnr = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var lis = num.getElementsByTagName ('li'); var timer1 = null, timer2 = null; var imgw = imgs [0] .Clientwidth; var x = 0; Funktion imgScroll () {// Bildschalter var start = box.scrollleft; var end = imgw*x; var change = end-start; var minstep = 0; var maxstep = 30; var StepLength = Änderung/maxstep; ClearInterval (Timer2); Timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxstep) {clearInterval (Timer2);} start+= StepLength; Box.scrollleft = Start;}, 20) für (var i = 0; } lis [x] .className = 'select'; } function move () {// Standard -Scrollen nach links alle 3 Sekunden ClearInterval (Timer1); Timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgScroll (); für (var i = 0; i <lis.length; i ++) {lis [i] .classname = 'keine'; } move (); // Starten Sie die Standard -Scroll -Funktion; btnr.onclick = function () {ClearInterval (Timer1); x ++; if (x> = imgs.length) {x = 0; } imgScroll (); bewegen(); } btnl.onclick = function () {ClearInterval (Timer1); X--; if (x <0) {x = imgs.length-1; } imgScroll (); bewegen(); } für (var i = 0; i <lis.Length; i ++) {lis [i] .Index = i; lis [i] .onclick = function () {x = this.index; imgScroll (); bewegen(); }} </script> </body> </html>Der spezifische Effekt basiert auf dem Effekt der HAO123 -Navigationsseite Bildkarousel. Sie können auf die Website gehen, um sich darauf zu verweisen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.