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