Javascript ermöglicht das nahtlose Scrollen von Bildern_Javascript-Fähigkeiten-js-Tutorial-php.cn

Effekt: Wenn die Maus in das Bild hinein bewegt wird, stoppt das Scrollen, wenn die Maus heraus bewegt wird, wird automatisch gescrollt

Kann das Scrollen in die linke oder rechte Richtung anpassen

Code kopieren Der Code lautet wie folgt: * { Rand: 0; padding: 0; } #div1 { Überlauf: versteckt; Breite: 712px; Höhe: 108px; Rand: 100 Pixel automatisch; Position: relativ; Hintergrund: rot; } #div1 ul { Position: absolut; links: 0; top: 0; } #div1 ul li { float: links; Breite: 178px; Höhe: 108px; Listenstil: keiner; }

Code kopieren Der Code lautet wie folgt: Gehe nach links Gehe nach rechts & Lt; img src = "IMG/seamless scrolling /1.jpg"/& gt;

Das Obige ist ein einfaches Layout und das Folgende ist der Haupt-Javascript-Code

Code kopieren

Der Code lautet wie folgt: window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var Geschwindigkeit = 2; oUl.innerHTML = oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; Funktion move() { if (oUl.offsetLeft oUl.style.left = '0'; } if (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 'px'; } oUl.style.left = oUl.offsetLeft speed 'px'; } var timer = setInterval(move, 30); oDiv.onmouseover = function() { clearInterval(timer); }; oDiv.onmouseout = function() { timer = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { Geschwindigkeit = -2; }; document.getElementsByTagName('a')[1].onclick = function() { Geschwindigkeit = 2; }; } 简单讲下思路：

首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意: oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

复制代码 代码如下: if (oUl.offsetLeft oUl.style.left = '0'; }

Dieser Absatz bedeutet, dass das Bild zur Hälfte gescrollt wurde. Ziehen Sie das Bild schnell zurück, da das Programm zu schnell ausgeführt wird, sodass es fast unsichtbar ist, um einen nahtlosen Bildlauf zu erreichen

Verwenden Sie abschließend die variable Geschwindigkeit, um das Scrollen in die linke und rechte Richtung zu steuern.

Der obige Code implementiert nur die grundlegendsten Funktionen, und Freunde können sich auf dieser Basis weiter verbessern.