JS reemplaza a Marquee para lograr un desplazamiento sin problemas de imágenes
Tal vez todos se hayan encontrado con esto. Cuando la imagen se desplaza en marquesina, cuando se desplaza hasta el final, vuelve al punto de partida, en lugar de desplazarse sin problemas. Lo siguiente es realizar un desplazamiento sin problemas de imágenes a través de JS.
Primero entendamos los siguientes atributos:
innerhtml: establecer o obtener html ubicado en las etiquetas de inicio y finalización del objeto
Scrollheight: obtiene la altura de desplazamiento del objeto.
Scrollleft: establezca o obtenga la distancia entre el límite izquierdo del objeto y el extremo más a la izquierda del contenido actualmente visible en la ventana
Scrolltop: establece o obtiene la distancia entre la parte superior del objeto y la parte superior del contenido visible en la ventana
Ancho de desplazamiento: obtenga el ancho de desplazamiento del objeto
OffsetHeight: obtiene la altura del objeto en relación con el diseño o la coordenada principal especificada por la propiedad de coordenadas de los principales compensación de compensación
OffsetLeft: obtiene la posición izquierda calculada del objeto en relación con el diseño o las coordenadas principales especificadas por la propiedad OffsetParent
Offsettop: Obtiene la posición superior calculada del objeto en relación con el diseño o las coordenadas principales especificadas por la propiedad Offsettop
OffsetWidth: obtiene el ancho del objeto en relación con el diseño o la coordenada principal especificada por la propiedad de Coordinate OffsetParent.
---------------------------------------------------------------------------------------------------
Las imágenes se desplazan hacia arriba sin problemas
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;height: 100px;text-align: center;float: left;}#demo img {border: 3px solid #F2F2F2;display: block;}--></style>Scroll up<div id="demo"><div id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </ail href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // Cuanto más grande es el número, cuanto más lento es la velocidad var tab = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab2 = document.getElementByIdx_x ("demo2"); Tab2.innerhtml = tab1.innerhtml; Clone damo1 como demos2Function marquee () {if (tab22.offsettop-tab.scrolltop <= 0) // cuando se desplaza a la unión de Demo1 y Demo2 Tab.Scrolltop- = Tab1.OffSetheTheight // Demo salta a la otra parte {Tab.Scrolltop ++}}}}}}}}}}}} Mymar = setInterval (marquee, velocidad); tab.onmouseover = function () {clearInterval (myMar)}; // Cuando el mouse se mueve, el temporizador se borra para lograr el propósito de desplazar la parada de parada.Las imágenes se desplazan sin problemas
<style type = "text/css"> <!- #demo {background: #fff; overflow: hidden; border: 1px discontinuado #ccc; altura: 100px; text-align: centro; float: izquierda;} #demo img {border: 3px sólido #f2f2f2; display: block;}-> </style> schroll hacia abajo <div id = "border: 3px sólido #f2f2f2; display: block;" id = "Demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </ail href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif" src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // Cuanto más grande es el número, cuanto más lento es la velocidad var tab = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab2 = document.getElementByIdx_x ("demo2"); Tab2.innerhtml = tab1.innerhtml; // clone delo1 es delo2tab.scrolltop = tab.scrollheightFunction marquee () {if (tab1.offsettop-tab.scrolltop> = 0) // cuando se desprecia a la unión de Demo1 y Demo2 Tab.Scrolltop+= tab22.OffsOftSeight Mymar = setInterval (marquee, velocidad); tab.onmouseover = function () {clearInterval (myMar)}; // Cuando el mouse se mueve, borre el temporizador para lograr el propósito de desplazar la parada tab.oNMouseOut = function () {mymar = setInterval (marquee, velocidad)}; // cuando el mero de mada se mueve, resete el temporizador-<scrute> script-<scrute-<scrute-<script-<//<//<//<////<//<////<////<//<////</GIRLas imágenes se desplazan sin problemas a la izquierda
<style type = "text/css"> <!-#demo {background: #fff; overflow: hidden; border: 1px Dable #ccc; width: 500px;}#Demo img {border: 3px sólido#f2f2f2;}#indema {float: izquierda; width: 800%;}#damo1 {float:} {float: izquierda;}-> </style> Scroll Left <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 = "#"> <img 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 = "#"> <img 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 = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // Cuanto más grande es el número, el más lento Vel Var Tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab1 = document.getElementByidx_x ("demo1"); var tab2 = document.getElementByIdx_X ("Demo2"); TAB2.innerhtml = TabLNerhtml; Marquee () {if (tab22.offsetwidth-tab.scrollleft <= 0) tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft ++;}} var mymar = setInterval (marquee, speed); tab.OnMouseOver = function () {CleareN {Mymar = setInterval (marquee, velocidad)};-> </script>Las imágenes se desplazan sin problemas a la derecha
<style type = "text/css"> <!-#demo {background: #fff; overflow: hidden; border: 1px Dable #ccc; width: 500px;}#Demo img {border: 3px sólido#f2f2f2;}#indema {float: izquierda; width: 800%;}#damo1 {float:} {float: left;}-> </style> Scroll derecho <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 = "#"> <img 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 = "#"> <img 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 = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // Cuanto más grande es el número, el más lento Vel Var Tab = document.getElementByIdx_x ("Demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab1 = document.getElementByidx_x ("demo1"); var tab2 = document.getElementByIdx_X ("Demo2"); TAB2.innerhtml = TabLNerhtml; Marquee () {if (tab.scrollleft <= 0) tab.scrollleft+= tab22.offsetwidthelse {tab.scrollleft-;}} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearVal (myMAR)}; tab.onmouseout = function () {Mymar = setInterval (marquee, velocidad)};-> </script>Finalmente, si alguien quiere tener dos conjuntos de imágenes de desplazamiento en una página, uno a la izquierda y el otro a la derecha, entonces se puede usar el siguiente. Agregué todo JS a I y CSS
Desplácese a la derecha
<div id = "Demoi"> <div id = "indemoi"> <div id = "Demoi1"> <a href = "#"> <img 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 = "#"> <img 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 = "#"> <img 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="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demoi2"></div></div><script><!--var Speedi = 10; // Cuanto más grande sea el número, más lenta es la velocidad var Tabi = document.getElementByIdx_x ("deloi"); var tabi1 = document.getElementByIdx_x ("Demoi1"); var tabi2 = document.getElementByIdx_X ("demoi2"); tabi2.innerhtml = tabi1.innerhtml; function; function; function; Marqueei () {if (tabi.scrollleft <= 0) tabi.scrollleft+= tabi2.offsetwidthelse {tabi.scrollleft-;}} var mymari = setInterval (marqueei, speedi); tabi.onmouseover = function () {clearval (mymari)}; {Mymari = setInterval (marqueei, speedi)};-> </script>El ejemplo simple anterior de JS que realiza el desplazamiento continuo ininterrumpido de las imágenes es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.