¿Cómo implementar el efecto de desplazamiento en HTML?

Preparación de materiales. Para expresar mejor el estilo y las características del sitio web, son esenciales algunas imágenes más expresivas y atractivas. De la misma forma, el editor también preparó algunas imágenes muy relacionadas con el tema de la página web como materiales para lograr el efecto de desplazamiento de las imágenes.

Abra Dreamweaver8, cree un nuevo archivo de página web y guárdelo como un archivo llamado "index.html".

Cambie a la interfaz de edición de código e ingrese el siguiente código:

& ltbody & gt& ltdiv id="photo-list " >? & ltul id = "desplazamiento" & gt?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/1 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李>?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/2 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李>?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/3 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李>?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/4 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李>?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/5 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李>?

& lt李& gt& lta href = " # " & gt& ltimg src = " imágenes/6 . jpg " ancho = " 100 px " alto = " 100 px " alt = " "/& gt; </a></李></ul></div></body>

Cree un nuevo archivo de hoja de estilos CSS y guárdelo en el mismo directorio que "index.html", el archivo El nombre es "MyStyle.css".

Ingrese el siguiente código en el archivo de hoja de estilo recién creado "MyStyle.css":

* {Padding: 0; Margin: 0;} ?/* Cambiar el conjunto de todos los objetos. el margen interior a 0*/

cuerpo { text-align:center;} ?/*Establecer alineación central de página*/

#Lista de fotos{

/* Ancho de 6 imágenes (incluido ancho, relleno, borde y espacio en blanco entre imágenes)

Cálculo: 6 * (102 * 2+1 * 2+9)-9?

La razón del menos 9 es que el lado derecho de la sexta imagen está en blanco*/

Ancho: 681px;?

/*El ancho de la imagen (incluido el alto, el relleno y el borde)

Cálculo: 102*2+1*2? */

Alto: 106 px;

Margen: 50 px automático;

Desbordamiento: oculto /*La parte de desbordamiento estará oculta*/?

Borde: 1px discontinuo #ccc?

} ?

#Lista de fotos ul { list-style:none;} ?

#Lista de fotos li {float: left; fill-right: 9px} ?

# photo-list img { border:1px solid # DDD; background: # ffffill:2px}

Agregue el estilo correcto al archivo de la página web "index.html " Referencia de tabla:

& ltlink rel = " hoja de estilo " type = " text/CSS " href = " my style CSS " >>p>

Cree un nuevo archivo JS y guárdelo. como "MoveEffect.js".

Ingrese el siguiente código en el archivo "MoveEffect.js":

var id = function(el) {? Devolver document.getelementbyid(El);},

c = id("Lista de fotos");

if (c) {

var ul = id ('voluta').

lis = ul . getelementsbytagname(' Li '),

itemCount = lis.length,

Ancho = lis[0]. offsetWidth, //Obtiene el ancho de cada contenedor img.

marquesina = function() {

c . desplazarse hacia la izquierda+= 2

if(c . desplazarse hacia la izquierda % ancho & lt;= 1){ ? // Cuando c.scrollLeft y el ancho sean iguales, agregue la primera imagen al final.

ul . appendchild(ul . getelementsbytagname(' Li ')[0]);

c . >

},

Velocidad = 50; //Cuanto mayor sea el valor, más lenta será la velocidad.

ul .width = width * item count+' px '; // ¿Establecer la longitud del contenedor después de la carga?

var timer = setInterval(marquesina, velocidad);

c.onmouseover = function() {

clearInterval(timer);

};

c.onmouseout = function() {

temporizador = setInterval(marquesina, velocidad);

};

};

Luego agregue una referencia al archivo "MoveEffect.js" en el archivo de la página de inicio "index.html".

& ltscript type = " text/JavaScript " src = " move effect . js " & gt; & lt/script & gt; archivo, el efecto final es el que se muestra: