Comentário SWX: Na medida do possível, tentamos melhorar a tradução padrão “google translator”
Depois do lançamento do IPAD e sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar aplicações mais interativas para o flash, se necessário.
HTML
Comece com um div chamado main_view, e duas seções aninhada chamadas image_reel e paging . O image_reel irá conter as imagens deslizantes e paging contém os controles de paginação. Dê uma olhada na imagem abaixo.
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="reel_1.jpg" alt="" /></a>
<a href="#"><img src="reel_2.jpg" alt="" /></a>
<a href="#"><img src="reel_3.jpg" alt="" /></a>
<a href="#"><img src="reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
CSS
Dê uma olhada nos comentários abaixo para uma explicação dos estilos.
/*-- Container Principal --*/
.main_view {
float: left;
position: relative;
}
/*--Janela / Masking Estilos--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paginação de Estilos--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; / *-- Garante a paginação fica na camada superior - * /
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; / *-- escondido por padrão, será mostrado mais tarde com jQuery - * /
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
Etapa 3. jQuery
Para aqueles que não estão familiarizados com jQuery , fazer check-out o seu primeiro site e obter uma visão geral de como ele funciona. Eu compartilhei um alguns truques que eu acumulei ao longo do caminho, você pode verificar os para fora também.
Etapa inicial – Chame o arquivo jQuery
Você pode optar por baixar o arquivo do site do jQuery, ou você pode usar o que está hospedado no Google.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Logo após a linha onde você linkou o seu jQuery, iniciar uma nova tag < script > com o evento $(document).ready. Isso faz seu código jQuery ser executado somente após o DOM estar pronto para ser manipulado. Todo o código que você vai escrever no próximos passos estará aqui dentro.
$(document).ready(function() {
//Code goes here
});
Etapa 4. Trazendo-a para a vida – jQuery
O script a seguir contém comentários explicando que ações JQuery estão sendo realizadas.
Configurando a imagem do Slide
Comece mostrando a paginação e ativando o primeiro link. Então vamos calcular e ajustar a largura do image_reel de acordo com quantos slides existem.
//Paginação e Função Slider
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Obtém o número de vezes para deslizar
var image_reelPosition = triggerID * imageWidth; Determina a distância que a image reel precisa de slides
$(".paging a").removeClass('active'); //Remove a classe CSS active de todos os links de paginação
$active.addClass('active'); //Adicionar classe ativa ($active é declarado na função rotateSwith)
//Slider Animação
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotação e Tempo de eventos
rotateSwitch = function(){
play = setInterval(function(){ //temporizador - isso vai se repetir a cada 7 segundos
$active = $('.paging a.active').next(); //Mover para proxima paginação
if ( $active.length === 0) { //Se a paginação acabar...
$active = $('.paging a:first'); //voltar para a primeira.
}
rotate(); //Dispara o paging e função deslizante;
}, 7000); //velocidade Timer em milissegundos (7 segundos)
};
rotateSwitch(); //lançamento
Clique Hover e Eventos
No caso de o usuário desejar exibir o slide por um longo período de tempo, permitirá o controle deslizante parar. Outra coisa a considerar é que devemos zerar o cronômetro a cada vez que a paginação for clicada. Isto irá prevenir mudanças inesperado e permitir uma experiência mais suave.
//On Hover
$(".image_reel a").hover(
function() { clearInterval(play); //Stop the rotation },
function() { rotateSwitch(); //Resume rotation timer }
);
//On Click
$(".paging a").click(
function() { $active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation timer
return false; //Prevent browser jump to link anchor
}
);
Fonte: Thauan Braga/OficinadaNet