Esta pequeña demostración usa principalmente la caja para arreglar la longitud y el ancho para mostrar la imagen. Coloque la imagen en el cuadro de imagen y conéctela. Cada vez que cambia la imagen, el margen-izquierda del atributo de estilo de la caja de imágenes se puede cambiar para formar un efecto de carrusel.
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> un documento titulado </title>
<estilo>
.caja {
Ancho: 900px;
Altura: 350px;
margen: 20px;
desbordamiento: oculto;
margen: 0 auto;
}
.ImageBox {
Ancho: 3600px;
Altura: 350px;
-WebKit-Transition: todos los 1s Fase-Out;
-Moz-Transition: todos los 1 en la facilidad;
-O-transición: todos los 1s en la facilidad;
Transición: todos los 1s Fase-Out;
}
.ImageBox img {
Ancho: 900px;
flotante: izquierda;
Altura: 350px;
}
</style>
</ablo>
<Body>
<div>
<div id = "ImageBox">
<img src = "Imágenes/imagen Haga clic en rotación/imagen-53.jpg"/>
<img src = "Imágenes/imagen Haga clic en rotación/imagen-54.jpg"/>
<img src = "Imágenes/imagen Haga clic en rotación/imagen-55.jpg"/>
<img src = "Imágenes/imagen Haga clic en rotación/imagen-56.jpg"/>
</div>
</div>
<div>
<input type = "button" value = "left" onClick = "Turnleft ()"/>
<input type = "button" value = "right" onClick = "Turnright ()"/>
</div>
<script language = "javaScript">
var int = setInterval ("Change ()", 3*1000);
var a = document.getElementById ("ImageBox");
var i = 1;
cambio de función () {
if (i == 4) {
i = 0;
}
i = i+1;
A.Style.Marginleft = (1-i)*900+"Px";
}
function stopchange () {ClearInterval (int);}
función startchange () {int = setInterval ("Change ()", 2*1000);}
a.onmouseover = function () {clearInterval (int);}
A.onMouseOut = function () {int = setInterval ("Change ()", 2*1000);}
función Turnleft () {
stopchange ();
i = i+1;
A.Style.Marginleft = (1-i)*900+"Px";
if (i == 4) {
i = 0;
}
startchange ();
}
función Turnright () {
stopchange ();
if (i> 1) {
A.Style.Marginleft = (2-i)*900+"Px";
i = i-1;
}demás{
A.Style.Marginleft = -3*900+"PX";
i = 4;
}
startchange ();
}
</script>
</body>
</html>