JS ersetzt das Festzelt, um ein nahtloses Scrollen von Bildern zu erreichen
Vielleicht ist jeder darauf begegnet. Wenn das Bild im Festzelt scrollt, springt es beim Scrollte bis zum Ende zurück zum Startpunkt, anstatt nahtlos wie Text zu scrollen. Das Folgende ist, ein nahtloses Scrollen von Bildern durch JS zu realisieren.
Lassen Sie uns zunächst die folgenden Attribute verstehen:
InnerHTML: Setzen oder erhalten Sie HTML in den Start- und End -Tags des Objekts
ScrollHeight: Holen Sie sich die Bildlaufhöhe des Objekts.
ScrollLeft: Stellen Sie den Abstand zwischen der linken Grenze des Objekts und dem linken Ende des aktuell sichtbaren Inhalts im Fenster ein oder
Scrolltop: Legt oder erhält den Abstand zwischen der Oberseite des Objekts und der Oberseite des sichtbaren Inhalts im Fenster
Scrollwidth: Holen Sie sich die Bildlaufbreite des Objekts
Offseteight: Holen Sie sich die Höhe des Objekts in Bezug
OffsetLeft: Ruft die berechnete linke Position des Objekts relativ zum Layout- oder übergeordneten Koordinaten ab, die von der OffsetParent -Eigenschaft angegeben sind
Offsettop: Erhält die berechnete obere Position des Objekts relativ zum Layout- oder übergeordneten Koordinaten der Offsettop -Eigenschaft
Offsetwidth: Erhält die Breite des Objekts relativ zum Layout oder zur übergeordneten Koordinate, die von der übergeordneten Koordinaten -OffsetParent -Eigenschaft angegeben ist.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Bilder scrollen nahtlos nach oben nach oben
<style type = "text/CSS"> <!- #Demo {Hintergrund: #fff; Überlauf: Hidden; Border: 1PX gestrichelt #ccc; Höhe: 100px; text-align: center; float: links;} #Demo img {border: 3px solide #f2f2; id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "//ww.vevb.com/other/link/clear_logo.logo.gif.gif href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "Demo2"> </div> </div> <script> <!-var spec = 10; // Die größere Nummer, die Nummer, die langsamer die Geschwindigkeit var tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab2 = document.GetElementByIdx_x ("Demo2"); tab2.innerhtml = tab1.innerhtml; // Clone Demo1 als Demo2Function marquee () {if (tab2.offsettop-tab.scrolltop <= 0) // Beim Scrollen zur Kreuzung von Demo1 und demo2 tab.scrolltop- = tab1.offsetel // Demo springt zu den oberen anderen {tab.scrolltop ++}}}} vars} Mymar = setInterval (marquee, Geschwindigkeit); tab.onmouseover = function () {ClearInterval (mymar)}; // Wenn die Maus nach oben bewegt wird, wird der Timer gelöscht, um den Zweck des Scrolling-Stopps tab.onmouseout = function () {mymar = setinterval (marquee}}}};//// // Wenn das Mouse abgeschrieben ist, ist das Tiktimum, das reset, reset, speed)};/////Maus.Bilder scrollen nahtlos nach unten
<style type = "text/css"> <!- #Demo {Hintergrund: #fff; Überlauf: Hidden; Border: 1px gestrichelt #ccc; Höhe: 100px; text-align: center; float; id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "//ww.vevb.com/other/link/clear_logo.logo.gif.gif href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "Demo2"> </div> </div> <script> <!-var spec = 10; // Die größere Nummer, die Nummer, die langsamer die Geschwindigkeit var tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab2 = document.GetElementByIdx_x ("Demo2"); tab2.innerhtml = tab1.innerhtml; // Clone Demo1 ist Demo2tab.Scrolltop = tab.scrollHeightFunction marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // Wenn Scrollen zur Übergabe von Demo1 und Demo2 tab. Mymar = setInterval (marquee, Geschwindigkeit); tab.onmouseover = function () {ClearInterval (mymar)}; // Wenn die Maus bewegt wird, löschenBilder scrollen nahtlos nach links
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: links;}-> </style> scroll links <div id = "Demo"> <div id = "indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "Demo2"> </div> </div> <script> <!-var spec = 10; // Die größere Nummer, die Nummer, die SPEED -VAR tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab2 = document.getByIdx_x; Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {Mymar = setInterval (marquee, speed)};-> </script>Bilder scrollen nahtlos nach rechts
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: links;}-> </style> scrollen Sie rechts <div id = "Demo"> <div id = "indemo"> <div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "Demo2"> </div> </div> <script> <!-var spec = 10; // Die größere Nummer, die Nummer, die SPEED -VAR tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab1 = document.getElementByIdx_x ("Demo1"); var tab2 = document.getByIdx_x; Marquee () {if (tab.scrollleft <= 0) tab.scrollleft+= tab2.Offsetwidthelse {tab.scrollleft-;}} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearinterval (mymar)}}; tab.onmous = function () () {) {mymar)}; Tab. {Mymar = setInterval (marquee, speed)};-> </script>Wenn jemand zwei Scrolling -Bildsätze auf einer Seite haben möchte, eine links und die andere nach rechts, kann der untene verwendet werden. Ich habe alle Js zu mir und CSS hinzugefügt
Nach rechts scrollen
<div id = "Demoi"> <div id = "indemoi"> <div id = "Demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = " src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demoi2"></div></div><script><!--var Speedi = 10; // Die Zahl der Zahl, die Nummer, die langsamer ist, das Speed var tabi = document.getElementByIdx_x ("Demoi"); var tabi1 = document.getElementByIdx_x ("Demoi1"); var tabi2 = document.getElementByIdx_x ("Demoi2"); tabi2.innerhtml = tabi1.innerhtml; Funktion. Marqueei () {if (tabi.scrollleft <= 0) tabi.scrollleft+= tabi2.Offsetwidthelse {tabi.scrollleft-;}} var myMari = setInterval (marqueei, speedi); tabi.onmouseout = function () {) = = = = = = = = = (myMari)}; {Mymari = setInterval (marqueiei, spezei)};-> </script>Das obige einfache Beispiel dafür, dass JS das ununterbrochene ununterbrochene kontinuierliche Bildlauf von Bildern realisiert, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.