1

Preciso encontrar uma forma de trocar as informações data-id e data-content para .number e .passo automaticamente, sem ter que depender do hover().

Preciso manter tanto a forma automática dessa troca como se fosse uma apresentação e o hover() se caso o usuário quiser permanecer na visualização de uma informação especifica.

Creio que fui claro

JS

$(function(){
    $('.nav-metodologia img').hover(function(){
        var getID      = $(this).data('id');
        var getContent = $(this).data('content');

        $('.number').html(getID);
        $('.passo').html(getContent);

        //console.log(pegaId);
    });
});

HTML

<div class="nav-metodologia pull-right slide-here">
    <img src="images/01.png" data-id="1" data-content="conteudo 01"/>
    <img src="images/02.png" data-id="2" data-content="conteudo 02"/>
    <img src="images/03.png" data-id="3" data-content="conteudo 03"/>
</div><!-- /.nav-metodologia -->

<div class="box-metodologia">
    <div class="number radius-2">1</div>
    <div class="passo">
        <p>Conteúdo inicial</p>
    </div><!-- /.box-metodologia -->
</div><!-- /box-metodologia -->
2
  • Pablo, quantas .number e .passo existem? uma por imagem ou só um de cada? O que quer dizer com automático? => quando a página carrega?
    – Sergio
    30/05/2014 às 5:24
  • São 7 de cada, é acontecer a mesma coisa que acontece atualmente mas sem ter de utilizar o hover() primeiro, quando carregar a pagina já começar a rodar de 1 em 1 passo como se a pessoa estivesse passando o mouse 30/05/2014 às 11:56

1 Resposta 1

3

Para alternar entre os itens, você pode manter uma variável que indique o próximo item a ser trocado e usar setInterval para executar a troca repetidamente e incrementar a variável.

Para interromper a apresentação com o cursor, você pode usar clearInterval no evento mouseover e setInterval novamente no evento mouseout, para retomar a apresentação.

Exemplo no JSFiddle

Adaptado desta pergunta no Stack Overflow em inglês

1
  • Muito obrigado Dang, é exatamente isso! 30/05/2014 às 11:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .