Jede Webseite, die Sie öffnen
Wenn Sie diese Karussellbilder beobachten, können Sie feststellen, dass die Bilder hin und her umgeschaltet werden können. Wie machen Sie das?
Es gibt zwei Hauptmethoden, um Karussell oder nahtloses Scrollen zu erreichen. Eine davon ist, das Bild anzuzeigen oder zu verbergen, indem das Licht und die Dunkelheit des Bildes geändert werden, dh transparente Bilder, und das andere ist, das Bild im sichtbaren Bereich durch einen sich bewegenden Rahmen anzuzeigen. Beide Methoden verwenden dasselbe, dh den Timer.
Es gibt zwei Arten von Timern in JavaScript, 1.SetInterval (); 2.Settimeout (); Es gibt auch zwei Methoden zum Schließen von Timern, ClearInterval () und Clearimeout (). Der Unterschied zwischen den beiden Timern besteht darin, dass erstere mehrmals ausgeführt werden kann, während letzteres nur einmal ausgeführt werden kann.
Dieses Mal werde ich nur über ein nahtloses Scrollen sprechen, und der nächste Artikel stellt das Carousel -Bild vor.
Der Code zum Implementieren einfacher nahtloser Scrollen lautet wie folgt:
/*Voller Code* /<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {Position: relativ; Breite: 630px; Höhe: 220px; Border: Solid 2px schwarz; Überlauf: versteckt;} ul {Position: absolut; top: 10px; links: 0;} img {width: 200px; Höhe: 200px; float: links; Rand-Rechts: 10px; Grenze: 2px solide gelb;} li {Listenstil: Keine; Rand: 0; Padding: 0;} Ul {Margin: 0; Polster: 0;} </style> <skript> Fenster.onload = function () {var Oul = document.getElementById ("Main"); var oinput = document.getElementsByTagName ("input") [0]; Oul.innerhtml+= OUl.innnerHtml; Oul.style.width = ali.length*ali [0] .Offsetwidth+"px"; var timer = null; setInterval (function () {Oul.style.left = OUL.OFFSETLEFT-8+"PX"; if (OUL.OFFSETLEFT <-OUL.OFFSETWIDTH/2) {OUl.Style.Left = "0px";}}, 30);}; id = "main"> <li> <img src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </body> </html>/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
Das nahtlose Scroll -Layout ist relativ einfach. Im Folgenden wird hauptsächlich der JS -Inhalt erklärt:
Get UL bzw. LI, kopieren Sie den Inhalt in UL, ändern Sie die Breite von UL dynamisch durch JS (wenn Sie nahtlos nach oben und unten scrollen möchten, seine Breite ändern möchten) und schließlich den Timer einschalten. Im Code bewegt UL alle 30 Mikrosekunden 8 Pixel nach links, und wenn der sichtbare linke Rand von UL weniger als die Hälfte der Gesamtlänge von UL ist, wird er 0. Da der Computer sehr schnell läuft, ist diese Änderung fast unmöglich zu fühlen. Alles, was wir sehen, ist das Bild, das sich ständig nach links, endlose Bewegung bewegt.
Das obige ist der nahtlose Scrollen -JS -Code, der Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!