O efeito da imagem do carrossel é mostrado na figura abaixo. As imagens podem ser giradas sozinhas. Clique nos botões esquerdo e direito para virar as páginas do carrossel.
A renderização é:
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carrossel de imagens com setas para a esquerda e para a direita</title>
<style type="texto/css">
<!--
.rollBox{largura:770px;altura:260px;overflow:oculto;preenchimento:10px;margem:0 automático;borda:1px vermelho sólido;}
.rollBox .LeftBotton{altura:40px;largura:21px;fundo:url(images/sl.png) sem repetição 0px 5px;overflow:oculto;float:esquerda;display:inline;margem:110px 0 0 0;cursor: ponteiro;}
.rollBox .RightBotton{altura:40px;largura:21px;fundo:url(images/sr.png) sem repetição 0px 5px;overflow:oculto;float:esquerda;display:inline;margem:110px 0 0 0;cursor: ponteiro;}
.rollBox .Cont{largura:726px;overflow:oculto;float:esquerda;}
.rollBox .ScrCont{largura:10000000px;}
.rollBox .Cont .pic{largura:242px;float:esquerda;alinhamento de texto:centro;}
.rollBox .Cont .pic img{preenchimento:9px;fundo:#fff;borda:1px sólido #ccc;display:bloco;margem:0 automático;largura:190px;altura:190px;}
.rollBox .Cont .pic div{altura da linha:20px;cor:#505050;margem:15px 0px;}
.rollBox .Cont .pic div span{display:block;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #Lista1,.rollBox #Lista2{float:esquerda;}
-->
</estilo>
</head>
<corpo>
<div>
<div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div id="ISL_Cont">
<div>
<div id="Lista1">
<!-- Início da lista de imagens -->
<div>
<a href="/" target="_blank"><img src="images/1.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/2.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/3.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/4.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/5.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/6.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/7.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/8.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Efeitos especiais legais do código do site 1</a></span>
<span>45446547</span>
</div>
</div>
<!-- Fim da lista de imagens -->
</div>
<div id="Lista2"></div>
</div>
</div>
<div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
</div>
</body>
<linguagem script="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//Lista de rolagem de imagens VeVB.COm
var Velocidade = 1; //Velocidade (milissegundos)
var Espaço = 5; //Mover cada vez (px)
var PageWidth = 726;
var fill = 0; //mudança geral
var MoveLock = falso;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("Lista2").innerHTML = GetObj("Lista1").innerHTML;
GetObj('ISL_Cont').scrollLeft = preencher;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
Reprodução Automática();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //Rolagem automática
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000);
}
function ISL_GoUp(){ //Começa a aparecer
if(MoveLock) retornar;
clearInterval(AutoPlayObj);
MoveLock = verdadeiro;
MoveTimeObj = setInterval('ISL_ScrUp();',Velocidade);
}
function ISL_StopUp(){ //Para de aparecer
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - preencher!= 0){
Comp = preenchimento - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}outro{
MoveLock = falso;
}
Reprodução Automática();
}
function ISL_ScrUp(){ //Ação para cima
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= Espaço;
}
function ISL_GoDown(){ //Reduzir
clearInterval(MoveTimeObj);
if(MoveLock) retornar;
clearInterval(AutoPlayObj);
MoveLock = verdadeiro;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Velocidade);
}
function ISL_StopDown(){ //Para de desligar
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + preenchimento;
CompScr();
}outro{
MoveLock = falso;
}
Reprodução Automática();
}
function ISL_ScrDown(){ //Ação de rolagem para baixo
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
GetObj('ISL_Cont').scrollLeft += Espaço;
}
função CompScr(){
varnum;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //aumenta
if(Comp < -Espaço){
Comp += Espaço;
num = Espaço;
}outro{
num = -Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Velocidade);
}else{ //Recusar
if(Comp > Espaço){
Comp -= Espaço;
num = Espaço;
}outro{
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',Velocidade);
}
}
//--><!]]>
</script>
</html>