1. Descripción general
El desplazamiento de imágenes en un bucle no solo puede agregar efectos dinámicos a la página web, sino también guardar el espacio de la página y garantizar efectivamente que se muestren más imágenes en páginas limitadas.
2. Puntos técnicos
El método principal se utiliza para lograr el efecto de desplazamiento de bucle de la imagen. El formato de sintaxis del método setTimeOut () es el siguiente:
setTimeOut (función, milisegundos, [argumentos])
Descripción del parámetro:
a. Función: el nombre de la función personalizada JavaScript a llamar.
b. MilliseConds: Establezca el tiempo de tiempo de espera en milisegundos.
Función: Después de que termine el tiempo de tiempo de espera, se llama a la función. Este valor se puede borrar con la función ClearTimeOut ().
3. Implementación específica
(1) Agregue una demo de atributo de ID con la etiqueta en la posición apropiada de la página y agregue una tabla y la imagen que se mostrará en la etiqueta. El código clave es el siguiente:
<div id = "Demo" Style = "Overflow: Hidden; Width: 455px; Height: 166px;"> <table CellPacing = "0" CellPadding = "0"> <tr> <td Valign = "Top" id = "Marquepic1"> <!-Imagen para desplazarse-> <Tabla Align = "Centro" CELELPADDIND = "0" CellPacing 0 "0" 0 "0" 0 "0" 0 "0". Align = "Center"> <%for (int i = 1; i <8; i ++) {%> <td> <img src = "imágenes/<%= i%>. jpg"> </td> <%}%> </tr> </table> </td> <td id = "marquepic2"> </td> </tr> </tport> </div>(2) Escriba una función JavaScript personalizada Move () para lograr un efecto de desplazamiento de bucle de imagen ininterrumpido. Cuanto mayor sea el valor de velocidad, más rápido se desplazarán la imagen. El código específico es el siguiente:
<script language = "javaScript"> var speed = 30; // establece el tiempo de intervalo marquepic2.innerhtml = marquepic1.innerhtml; var demo = document.getElementById ("demo"); // Obtener función de objeto de demostración Marquee (n) {// Método para realizar el desplazamiento del bucle de imagen if (marquepic1.offsetwidth-demo.scrollleft <= 0) {demo.scrollleft = 0; } else {Demo.Scrollleft = Demo.scrollleft+n;}} var mymar = setInterval ("marquee (5)", velocidad); demo.onMouseOver = function () {// deja de desplazarse Mymar = setInterval ("marquee (5)", velocidad);} </script>Lo anterior es el conocimiento relevante sobre el código JavaScript que el editor le presentó para realizar el efecto de desplazamiento del bucle de imagen. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!