Jeder ist mit der HAO123 -Website vertraut. Ich muss nicht mehr über die spezifischen Effekte sagen. Interessierte Freunde können sich auf die Renderings beziehen. Der folgende Editor wird Ihnen die Idee zur Implementierung des Codes mitgeteilt. Natürlich können Sie den Code entsprechend Ihren Anforderungen angemessen hinzufügen, ändern und löschen.
Der Schlüsselcode lautet wie folgt:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> bild karousel </title> <style> .warp {width: 600px; Höhe: 750px; 750px; Position: absolut; ober: 0px; links: 0px; Überlauf: versteckt;/*Überlauf-x: auto;*/}#Box #con {width: 6000px; Höhe: 750px; Überlauf: versteckt;}#con img {float: links; 0px; ober: 366px; width: 36px; Höhe: 36px; Hintergrund: URL (Bilder/Btnl.png) 0 0 No-Repeat; Cursor: Zeiger;}#Btnr {Position: absolut; rechts: 0px; oben: 366px; no-repeat; pointer;}#num li.select{background-color: green;color: white;}</style></head><body><div><div id="box"><div id="con"><img src="images/meinv1.jpg"><img src="images/meinv2.jpg"><img src="images/meinv3.jpg"><img Src = "Images/meinv4.jpg"> <img src = "Images/meinv5.jpg"> <img src = "Images/meinv6.jpg"> </div> <div id = "btnl"> </div> <div id = "btnr"> </div> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <ul> </div> <div. id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.getElementById ('Box'); var con = document imgs = con.getElementsByTagName ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'; imgw = imgs [0] .clientwidth; var x = 0; Funktion imgScroll () {// Bildschalter var start = box.scrollleft; var end = imgw*x; var änderung = end-start; var minstep = 0; var maxstep = 30; var; var; var; var; var; var; var; var; var; var; var; StepLength = Änderung/maxstep; ClearInterval (Timer2); Timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxstep) {ClearInterval (Timer2); i ++) {lis [i] .className = 'none';} lis [x] .className = 'select';} function () {// Standard -Scrolling nach links alle 3 Sekunden ClearInterval (Timer1); Timer1 = setInterval (function () {x ++; if (x> = imgs) {x = 0; i = 0; btnr.onclick = function () {clearInterval (Timer1); x ++; if (x> = imgs.length) {x = 0;} imgScroll (); move ();} btnl.onclick = function () {ClearInterval (Timer1); x-; {x = imgs.length-1;} imgScroll (); move ();} für (var i = 0; i <lis.Length; i ++) {lis [i] .Index = i; lis [i] .onclick = function () {x = this.index; imgScroll (); Move ();}}}}}}}}} </script;Das obige ist der Bildkarousel -Effekt der JS -Imitation HAO123 Navigationsseite, die Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!