JavaScript-Timer zum nahtlosen Scrollen von Bildern

In diesem Artikel wird der spezifische JavaScript-Code zum nahtlosen Scrollen von Bildern zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Text:

setInterval startet einen Intervalltimer
clearTimeout schließt den Timer
offsetWidth Breite abrufen
offsetLeft Den linken Offset ermitteln

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Nahtlose Mobilität</title>
    <Stil>
        *{Rand: 0; Polsterung: 0;}
        #div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! Die Position von div1 ist relativ*/
                Hintergrund: rosa; Überlauf: versteckt} /* !!! Überlauf: versteckt */
        #div1 ul{position: absolute; left:0; top:0;} /* !!! ul's position: absolute, steuert den Wert von left*/
        #div1 ul li{float:left; Breite:130px; Höhe:170px; Listenstil: keine}
    </Stil>
    <Skript>
        fenster.onload = Funktion () {
            var oDiv = document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var Geschwindigkeit = 2;

            oUl.innerHTML+=oUl.innerHTML; // Entspricht 4*2 verschobenen Bildern oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth

            Funktion Verschieben() {
                if(oUl.offsetLeft <- oUl.offsetWidth/2){ // Bewege dich zur Hälfte nach links und dann zurück oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){ // // Bewege dich zur Hälfte nach rechts und dann zurück oUl.style.left = - oUl.offsetWidth/2 +'px';
                }
                oUl.style.left=oUl.offsetLeft + Geschwindigkeit + 'px'; // !!!!!!!! offsetLeft
            }

            var Timer1 = setInterval(Move, 30); // setInterval schaltet den Intervalltimer ein oDiv.onmouseover = function () {
                Zeitüberschreitung löschen(Timer1);
            };
            oDiv.onmouseout=Funktion () {
                Timer1=setInterval(Bewegung, 30);
            };

            document.getElementsByTagName('a')[0].onclick=function () {
                speed=-2; // Geschwindigkeit nach links};
            document.getElementsByTagName('a')[1].onclick=function () {
                speed=2; // Geschwindigkeit nach rechts};
        };
    </Skript>

</Kopf>
<Text>
<a href="javascript:;" >Nach links bewegen</a>
<a href="javascript:;" >Nach rechts bewegen</a>
    <div id="div1">
        <ul>
            <li><img src="img/aa.jpg"/></li>
            <li><img src="img/bb.jpg"/></li>
            <li><img src="img/cc.jpg"/></li>
            <li><img src="img/dd.jpg"/></li>
        </ul>
    </div>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: