Esta pequena demonstração usa principalmente a caixa para corrigir o comprimento e a largura para exibir a imagem. Coloque a imagem no ImageBox e conecte -a. Cada vez que você altera a imagem, a margem-esquerda do atributo de estilo do ImageBox pode ser alterada para formar um efeito de carrossel.
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> unt intitulado Documento </title>
<estilo>
.caixa {
Largura: 900px;
Altura: 350px;
margem: 20px;
estouro: oculto;
margem: 0 automático;
}
.ImageBox {
Largura: 3600px;
Altura: 350px;
-Webkit-transição: todos os 1s facilidade;
-Moz-transição: todos os 1s facilidade;
-O-transição: todos os 1s facilidade;
Transição: todos os 1s facilitam-se;
}
.ImageBox img {
Largura: 900px;
flutuar: esquerda;
Altura: 350px;
}
</style>
</head>
<Body>
<div>
<div id = "ImageBox">
<img src = "imagens/imagem clique em rotação/imagem-53.jpg"/>
<img src = "imagens/imagem clique em rotação/imagem-54.jpg"/>
<img src = "imagens/imagem clique em rotação/imagem-55.jpg"/>
<img src = "imagens/imagem clique em rotação/imagem-56.jpg"/>
</div>
</div>
<div>
<input type = "button" value = "esquerda" onclick = "turnleft ()"/>
<input type = "button" value = "direita" onclick = "TurnRright ()"/>
</div>
<Script Language = "JavaScript">
var int = setInterval ("alteração ()", 3*1000);
var a = document.getElementById ("ImageBox");
var i = 1;
função alteração () {
if (i == 4) {
i = 0;
}
i = i+1;
a.style.marginleft = (1-i)*900+"px";
}
função stopChange () {clearInterval (int);}
função startchange () {int = setInterval ("alteração ()", 2*1000);}
A.OnMouseOver = function () {ClearInterval (int);}
a.onMouseOut = function () {int = setInterval ("alteração ()", 2*1000);}
função turnleft () {
StopChange ();
i = i+1;
a.style.marginleft = (1-i)*900+"px";
if (i == 4) {
i = 0;
}
startchange ();
}
função turnright () {
StopChange ();
if (i> 1) {
a.style.marginleft = (2-i)*900+"px";
i = i-1;
}outro{
a.style.marginleft = -3*900+"px";
i = 4;
}
startchange ();
}
</script>
</body>
</html>