Cómo implementar el cambio de imágenes en la producción de páginas web

Cree una nueva carpeta de proyecto, como se muestra en la siguiente figura

Escriba el índice.

html, el código es el siguiente:

lt; DOCTYPE htmlgt;

lt; htmlgt; lt; meta charset="utf-8" /gt;

lt;titlegt;

lunbo

lt;/titlegt;

lt; enlace href="css/style.css" rel="stylesheet"/gt;

lt; scriptrc="js/lunbo.js"gt;

lt; /scriptgt;

lt;/headgt;

lt;bodygt;

lt;div id="contenedor"gt.

lt;div id="list" style="left:-600px;"gt;

lt;img src="images/5.jpg" alt="5.pg"/gt;

lt;img src="images/1.jpg" alt="5.pg"/gt;

lt;img src="images/2.jpg" alt="5 .pg" /gt;

lt;img src="images/3.jpg" alt="5.pg"/gt;

lt;img src="images/ 4.jpg " alt="5.pg"/gt;

lt;img src="images/5.jpg" alt="5.pg"/gt;

lt;img src="images/1.jpg" alt="5.pg"/gt;

lt;/ divgt;

lt; div id="botones"gt ;

lt; p>

lt; intervalo de índice="1" class="on"gt;/spangt;

lt; gt; lt;/spangt;

lt;span index="3"gt;lt;/spangt;

lt;span index="4"gt; lt;/spangt;

lt; span index="5"gt;lt;/spangt;

lt;/divgt;

lt;a href ="javascript:

lt;a href="javascript:;" class="arrow" id="prev"gt;amp;lt;lt;/agt;

lt ;/divgt;

lt;/bodygt;

lt;/htmlgt;

Escribe el archivo style.css, el código es el siguiente:

*{ margen: 0px; texto- decoración: ninguna }

cuerpo{margin-top: 50px;}

#container{ancho: 600px; 400px; posición: relativa; borde.3px sólido #333; desbordamiento: ?oculto; margen: 0 auto;}

#list{ancho: 4200px;

0px; posición: absoluta; índice z: 1; }

#list img{ float: left;}

#buttons{posición: altura: 10px; ; índice z: 2; abajo: 20px; izquierda: 250px; }

#buttons span{cursor: puntero; /* estilo de hipervínculo falso**/ float: borde: 1px ?solid #fff ; ancho: 10px; alto: 10px; radio del borde: 10px; fondo: #333; margen derecho: 5px; >.arrow{cursor: puntero; visualización: ninguno; altura de línea: 39px; alineación de texto: centro; tamaño de fuente: 36px; : 40px; ?posición: absoluta; índice z: 2; superior: 180px;

color de fondo: RGBA(0, 0, 0, .3); >

.arrow: hover{fondo-color: RGBA(0, 0, 0, .getElementById('contenedor');

var list=document.getElementById('lista'); p>

var botones=document.getElementById('botones').getElementsByTagName('span');

var pre=document.getElementById('lista').getElementById('prev'

var next=document.getElementById('next');

var index=1;

var animados=false;

var temporizador;

función showButton(){

for(var i=0; ilt; botones.longitud; i ){

if(botones [i ].className=='on'){

botones[i].className='';

romper;

}

}

botones[index-1].className="on";

}

función animar(desplazamiento){

animated=true;

var newleft=parseInt(list.style.left) offset;

var time=300; //Tiempo total de desplazamiento

var intervalo =10; //desplazamiento

Intervalo

var speed=offset/(time/interval); // Cada tiempo de desplazamiento

función go(){

if((speedlt; 0amp ; amp;parseInt(list.style.left)gt;newleft)||(speedgt;0amp;amp;parseInt(list.style. ?left)lt;newleft)){

list.style. = parseInt(list.style.left) velocidad 'px';

setTimeout(go, intervalo);

}

else{

animado=false;

list.style.left=newleft 'px';

if(newleftgt;-600){

list.style . left=-3000 'px';?

}

if(newleftlt;-3000){

list.style.left=-600 'px ' ;?

}

}

}

ir();

}

función play(){

timer=setInterval(function(){

next.onclick();

}, 3000);

}

función stop(){

clearInterval(temporizador);

}

next.onclick= función (){

siguiente.onclick();

}, 3000);

}

función parada(){< / p>

clearInterval(temporizador);

}

next.onclick=function(){

if(index==5){

p>

índice=1;

}

else{

índice =1;

}

showButton();

if(animated==false){

animar(-600);

}

}

pre.onclick=function(){

if(index==1){

index=5;

}

else{

index-=1

}

showButton(); p>if(animado= =false){

animado(600);

}

}

for(var i= 0; ilt; botones. longitud; i ){

botones[i].onclick=function(){

if(this.className=='on'){

return ;

}

var myIndex=parseInt(this.getAtt

ribute(' index'));

var offset=-600*(myIndex-index);

index=myIndex;

showButton();

if(animado==falso){

animado(desplazamiento);

}

}

}

container.onmouseover=detener

container.onmouseout=reproducir

reproducir(); p>La captura de pantalla del archivo de imagen es la siguiente:

La captura de pantalla del efecto en ejecución es la siguiente: