Erzielen Sie eine Reihe von Bildzirkulationen und End-to-End-Bildlaufeffekten

Entwurfsidee: Speichern Sie zwei identische Inhalte (unter Verwendung einer Zeile und mehrerer Listenzellen) als Bildlaufobjekt in einem Div und verbergen Sie den Inhalt der überschüssigen Breite. Definieren Sie die Methode zum Verschieben von Div im JS-Skript (horizontale Koordinate plus 1). Wenn der erste Inhalt vollständig verschwindet (dh der Abstand, um den sich Div nach links bewegt, erreicht die Breite des Div und der zweite Inhalt wird zu diesem Zeitpunkt vollständig angezeigt), werden die Koordinaten der Bildlaufleiste zurückgesetzt und eine neue Runde gestartet.

Der Code lautet wie folgt:

< html > 
< head > 
    < meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" > 
    < title > eine Gruppe von Bildern mit einem Bildlaufeffekt, der Ende an Ende verbunden ist </ title > 
    < style > 
    #bg { 
        Breite : 940px ; Höhe : 300px ; 
        Hintergrund: URL (images / boutique 
        
    display.jpg ); } #sm { / * Bildlaufobjektstil * / 
        Überlauf : versteckt ; / *Wenn Sie den zusätzlichen Inhalt in Div ausblenden, werden die zusätzlichen Bilder zusammen gescrollt * / 
        width : 920px ; height : 280px ; 
        margin : 0 auto ; padding 
        -top : 30px ; 
        } 
    </ style > 
</ head > 
< body > 
< center > 
    < div die oben angegebene ID = "BG" > 
        < div die oben angegebene ID = "SM" >     <! - Scrollen div -> 
                < die Tabelle >         <! - äußere Form 1x2,Und die zweite Zelle ist leer- >
                    < tr > 
                        < td id = "Pic1" > 
                            < table >     <! - 内 x 1x9, 存放 9 张> -> 
                                < tr > 
                                    < td > < img src = "images / 1.jpg" οnmοuseοver = "mouseover (this)“ οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > < img src = "images / 2.jpg" οnmοuseοver Mouseover (this) "=" οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > < imgsrc = "images / 3.jpg" οnmοuseοver "Mouseover (this)" = οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > < img src = "images / 4.jpg" οnmοuseοver "Mouseover = ( this)“ οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > < img src = "images / 5.jpg" οnmοuseοver Mouseover (this) "=" οnmοuseοut = "mouseout (this)" /> < / td > 
                                    < td > <img src = "images / 6.jpg" οnmοuseοver= "Mouseover (this)" οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > < img src = "images / 7.jpg" οnmοuseοver "Mouseover (this)" = οnmοuseοut = "mouseout (this) " /> </ td > 
                                    < td > < img src =" images / 8.jpg " οnmοuseοver =" mouseover (this) " οnmοuseοut =" mouseout (this) " /> </ td > 
                                    < td > < img src = "images / 9.jpg"οnmοuseοver = "Mouseover (this)" οnmοuseοut= "mouseout (this)" /> </ td > 
                                </ tr > 
                           </ table > 
                       </ td > 
                    < td id = "Pic2" > </ td > 
                    </ tr > 
                </ table > 
        </ div > 
    < / div > 
</ center > 
 
<! - Das Client-Skript mit dem folgenden Inhalt kann nicht am 
    Anfang der Seite platziert werden- > 
 
< script > Pic2.innerHTML = Pic1.innerHTML;// Kopiere eine Gruppe von Bildern, aber es ist versteckte 
    Funktion scrolltoleft () { //Definieren Sie die Methode zum Verschieben nach links. 
        Sm.scrollLeft ++ ; // Ändern Sie die horizontale Koordinate der Ebene, um eine Verschiebung nach links zu erreichen, 
        wenn (sm.scrollLeft > = Pic1.scrollWidth) //             sm.scrollLeft = 0 ; // Die Position der Ebene zurücksetzen 
muss Zurücksetzen, die Breite des Browserfensters ist begrenzt     } var MyMar = setInterval (scrolltoleft, 40 ); // Timer, Methodenname kann nicht hinzugefügt werden () Funktion mouseover (x) { // Bild         vergrößern x.style.width = " 210 " ; 
        x.style.height = " 256 "

    
    
    
    

        x.style.cursor = " pointer " 
    } 
    Funktion mouseOut (X) { // Bild Restaurations 
        x.style.width = " 105 " ; 
        x.style.height = " 128 " 
    } 
 
    // beide Seiten der beiden Linien sind die Antwortobjektmethode Ereignis 
    sm.οnmοuseοver = function () { // anonyme Methode (Funktion) 
        clearInterval (MyMar); // Bildlauf 

    beenden     } 
    sm.οnmοuseοut = function () { 
        MyMar = setInterval (scrolltoleft, 40); // Scrolle weiter 
    } 
    
 
</ script >                             
</ body > 
</ html >