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> <li> <a href = "#"> <img src = "4.jpg"/> </a> </ul> </div> </div> </div> </div> </div> </uw> </div> </div> </ul> </div> </div> </div> </ul> </div> </div> </div> </ul> </div> </div> </div> </div> </ul> </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; Oben: 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'); // 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 Nummer ist, weil Ul's links links eine negative Nummer Oul.style ist. if (Oul.offsetLeft> 0) {Oul.style.left = -Oul.Offsetwidth/2+'px'; } Oull.Style.left = Oul.offsetleft+ispeed+'px'; // Das 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>Das obige ist die vom Herausgeber geteilten Nahtlosen-Bildschirmideen und Code, die von JS basiert. Ich hoffe es kann dir helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung für die Wulin Network -Website!