Prinzip:
1. Geben Sie UL eine absolute Position, um es vom Dokumentstrom getrennt zu machen, links auf 0 einzustellen, das Bild in UL zu füllen, eine "Bewegungsfunktion" zu schreiben. Die Funktionsfunktion kann ULs links mit einer positiven Geschwindigkeit nach rechts laufen lassen.
2. Stellen Sie einen Timer ein, damit die Funktion "Verschiebung" alle 30 Millisekunden ausführen (variable Parameter).
3. Da die Länge von UL "ausgeführt" wird, kann der Inhalt von UL, dh img, verdoppelt werden.
Oul.innerhtml += Oul.innerhtml;
4. Da der Inhalt der UL zu diesem Zeitpunkt zunimmt, wird die Breite ebenfalls zunehmen, und die Anzahl der angezeigten Bilder kann sich je nach dem tatsächlichen Projekt ändern oder ungewiss sein.
Oul.Style.width = oli.length*oli [0] .Offsetwidth+'px';
5. Code zur Funktion "Verschieben" hinzufügen.
5.1 Zu diesem Zeitpunkt bewegt sich UL nach rechts. Wenn ULs OffsetLeft> 0, ziehen Sie UL nach links "halb so breit von ul", dh ermöglichen, UL ohne Grenzwert nach rechts zu bewegen.
if (Oul.offsetLeft> 0) {Oul.style.left = -Oul.Offsetwidth/2+'px';};5.2 Wenn UL nach links bewegt und der OffsetLeft die Hälfte der Breite von UL verläuft, ziehen Sie die gesamte UL zurück nach links: 0;
if (Oul.OffsetLeft <-oul.Offsetwidth/2) {Oul.style.left = 0; }Auf Code:
HTML:
<div id="box"> <ul> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> </div>
CSS:
* {Margin: 0; Padding: 0;} #box {width: 480px; Höhe: 110px; Grenze: 1px rote Feststoff; Rand: 100px Auto; Überlauf: versteckt; Position: Relativ; } #Box ul {Position: absolut; links: 0; TOP: 5PX;} #Box ul li {Listenstil: Keine; float: links; Breite: 100px; Höhe: 100px; Padding-Links: 16px; } #box ul li img {width: 100px; Höhe: 100px;}JS:
<Script> window.onload = function () {var odiv = document.getElementById ('div1'); var Oul = odiv.getElementsByTagName ('ul') [0]; var oli = OUl.GetElementsByTagName ('li'); var aa = document.getElementsByTagName ('a'); var ispeed = 10; // lass UL eine Geschwindigkeit haben, um Oul.innerhtml += Oul.innerhtml zu bewegen; Oul.Style.width = oli.length*oli [0] .Offsetwidth+'px'; aa [0] .onclick = function () {ispeed = -10; }; aa [1] .onclick = function () {ispeed = 10; }; Funktion fnmove () {if (Oul.OffsetLeft <-Oul.Offsetwidth/2) {// Die negative Zahl liegt daran, dass ULs links eine negative Zahl ist Oul.style.left = 0; } else if (Oul.offsetLeft> 0) {Oul.style.left = -oul.offsetwidth/2+'px'; } Oull.Style.left = Oul.offsetleft+ispeed+'px'; // Die ganze UL bewegt sich nach rechts}; var timer = null; ClearInterval (Timer); Timer = setInterval (fnmove, 30); Oul.onmouseover = function () {ClearInterval (Timer); }; Oul.onmouseout = function () {timer = setInterval (fnmove, 30); // Führen Sie diesen Timer aus, wenn die Maus weg verschoben wird}; }; </script>Wenn es Fehler gibt, korrigieren Sie sie bitte.
Der oben genannte nahtlose Scrolling einfache Implementierungscode (empfohlen) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.