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: <br> * {<br> Rand: 0;<br> padding: 0;<br> }<br> #div1 {<br> Überlauf: versteckt;<br> Breite: 712px;<br> Höhe: 108px;<br> Rand: 100 Pixel automatisch;<br> Position: relativ;<br> Hintergrund: rot;<br> }<br> #div1 ul {<br> Position: absolut;<br> links: 0;<br> top: 0;<br> }<br> #div1 ul li {<br> float: links;<br> Breite: 178px;<br> Höhe: 108px;<br> Listenstil: keiner;<br> }<br> <br> </div> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31087" class="copybut" id="copybut31087" onclick="doCopy('code31087')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span><div class="codebody" id="code31087"> <br> <body><br> <a href="javascript:;">Gehe nach links</a><br> <a href="javascript:;">Gehe nach rechts</a><br> <div id="div1"><br> & Lt; img src = "IMG/seamless scrolling /1.jpg"/& gt; </body><br> <br><br> <br>Das Obige ist ein einfaches Layout und das Folgende ist der Haupt-Javascript-Code<br> <br><br><br><br><br>Code kopieren<br><br><br> Der Code lautet wie folgt:<br><div class="codebody" id="code9061"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var oDiv = document.getElementById("div1");<br> var oUl = oDiv.getElementsByTagName('ul')[0];<br> var aLi = oUl.getElementsByTagName('li');<br> var Geschwindigkeit = 2; <br> oUl.innerHTML = oUl.innerHTML;<br> oUl.style.width = aLi[0].offsetWidth * aLi.length 'px';<br> Funktion move() {<br> if (oUl.offsetLeft < -oUl.offsetWidth / 2) {<br /> oUl.style.left = '0';<br /> }<br /> if (oUl.offsetLeft > 0) {<br> oUl.style.left = -oUl.offsetWidth / 2 'px';<br> }<br> oUl.style.left = oUl.offsetLeft speed 'px';<br> }<br> var timer = setInterval(move, 30);<br> oDiv.onmouseover = function() {<br> clearInterval(timer);<br> };<br> oDiv.onmouseout = function() {<br> timer = setInterval(move, 30);<br> };<br> document.getElementsByTagName('a')[0].onclick = function() {<br> Geschwindigkeit = -2;<br> };<br> document.getElementsByTagName('a')[1].onclick = function() {<br> Geschwindigkeit = 2;<br> };<br> }<br> </script><br> </div> <p>简单讲下思路：</p> <p>首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;</p> <p>在 计算ul的宽度为 li的实际宽度*8</p> <p>之后将 多余的内容隐藏</p> <p>注意: oUl.offsetLeft 肯定是负值</p> <p>所以判断的时候不要把负号漏掉</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="48582" class="copybut" id="copybut48582" onclick="doCopy('code48582')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code48582"> <br> if (oUl.offsetLeft < -oUl.offsetWidth / 2) { <br> oUl.style.left = '0'; }<p> <br></p> </div> 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<p> </p>Verwenden Sie abschließend die variable Geschwindigkeit, um das Scrollen in die linke und rechte Richtung zu steuern. <p> </p>Der obige Code implementiert nur die grundlegendsten Funktionen, und Freunde können sich auf dieser Basis weiter verbessern. <p></p> </div> </div>
