1

Bom, eu tenho um box, esse box tem algumas abas, clicando na aba o conteúdo do box muda. O conteudo é alterado quando clico em um dos links que chama a aba. Eis o codigo:

<p id="slid">
    <a href="#slid3">3º Passo</a>
    <a href="#slid2" >2º Passo</a>
    <a href="#slid1" class="slidselected" >1º Passo</a>                     
</p>

<ul id="slidcontents">
  <!-- tab 1 -->   
    <li id="slid1">
      Conteúdo que aparece ao clicar no link 1º passo
    </li>      
    <li id="slid2">
      Conteúdo que aparece ao clicar no link 2º passo
    </li>
    <li id="slid3">
      Conteúdo que aparece ao clicar no link 3º passo
    </li>
</ul>

Então, o conteúdo do box muda somente quando clica em cima de alguns dos links que estão dentro do p id="slid", e eu gostaria de automatizar isso, fazendo com que mesmo que se não clicar em nenhum desses links o conteúdo do box se altere como se tivesse clicado. O script que uso pra fazer a alteração do conteúdo do box é:

$.quickslidl = function ()
  {
    /* Elements */
    var slidl = 'p#slid';
var cont_slid = 'ul#slidcontents';

/* Hide all post */
    $(cont_slid + ' li').hide();

/* Display the first tab */
    $(cont_slid + ' li:first-child').show();

/* When user click a tab */
    $(slidl + ' a').click(function()
{
        /* Remove slidselected class on all post */
        $(slidl + ' a').removeClass('slidselected');

        /* Add a slidselected tab class */ 
        $(this).addClass('slidselected');

        /* Hide all opened tags */ 
        $(cont_slid + ' li').hide();

        /* Display the clickec tab */ 
        $(cont_slid +  ' ' + $(this).attr('href')).show(); 
        /* End :D */ 
    return false; 
}); 
};

/* When all is ready */ 
$(document).ready(function()    { 
/* Start function */ 
$.quickslidl();

});

2 Respostas 2

3

Teste assim:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        i++;
        $(links).eq(i).click();
        if (i == links.length) i = 0;
    }, 1000);
});

Exemplo: http://jsfiddle.net/E84UF/

Teste assim:

$(document).ready(function () {
    var galeria, i = 0;
    var links = $('#slid a').get().reverse();
    var slides = $('#slidcontents li');
    $(links).on('click', function (e) {
        e.preventDefault();
        slides.removeClass('mostrar');
        slides.eq(links.indexOf(this)).addClass('mostrar');
        if (e.which) clearInterval(galeria);
    });
    galeria = setInterval(function () {
        $(links).eq(i).click();
        i++;
        if (i == links.length) i = 0;
    }, 1000);
});

Exemplo: http://jsfiddle.net/E84UF/1/

O código em cima tem duas partes. A parte que trata do clic e faz mudar o <li>, e em baixo um setInterval que dispara clics programáticos nos elementos e assim fazendo a primeira parte correr. Para distinguir o clic real do falso usei if (e.which) clearInterval(galeria);. Assim um clic real faz parar o slide.

7
  • Funciono perfeitamente. Commented 6/06/2014 às 17:46
  • Só mais uma pergunta. Na hora do loop, ele nunca volta pro primeiro link, volta sempre pro segundo. Porque isso? Ate no seu exemplo ele faz isso. Ele começa no link 1, vai pro link 2 depois pro 3 e pula pro segundo link de novo Commented 6/06/2014 às 18:33
  • Ah, como eu poderia teria como aplicar também efeito de transição no script, eu já tentei mas não fui bem sucedido. Commented 6/06/2014 às 18:37
  • 1
    @ivanveloso, tem razão tinha uma linha trocada. Aqui: jsfiddle.net/E84UF/1
    – Sergio
    Commented 6/06/2014 às 18:40
  • 1
    @ivanveloso fazer a transição fica um pouco mais complexo, tem de criar elementos que estão por cima uns dos outros e fazer transição da opacity
    – Sergio
    Commented 6/06/2014 às 18:43
0

Você pode usar o event.preventDefault() do JQuery, que vai remover o comportamento padrao daquele link (que seria ir para uma url ali definida no atributo href da tag a) e adicionar seu comportamento customizado. Voce criaria handlers para os seus links (por meio dos ids deles ou pegando qualquer tag de link mesmo se preferir como mostra o exemplo abaixo).

Veja exemplo de uso abaixo:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>

</body>
</html>

Mais informações sobre este comando: http://api.jquery.com/event.preventdefault/

E você criar ações de click usando o comando click() do Jquery tambem

$( "#other" ).click(function() {
  $( "#target" ).click();
});

Mais informações sobre o comando click(): http://api.jquery.com/click/

A funcionalidade do cronometro você pode implementar usando a função setInterval, que seria chamada a partir do handler adequado. Um exemplo de uso bem simples segue abaixo:

//exibe um alert na tela a cada 5 segundos
setInterval(function(){alert(" Teste do cronometro ")}, 5000);

Mais exemplos de uso do setInterval veja aqui: http://www.w3schools.com/jsref/met_win_setinterval.asp

7
  • Mas e a questao do tempo? como posso fazer? Commented 6/06/2014 às 4:12
  • a questao do tempo voce resolve usando setTimeInterval (função nativa do JavaScript) Commented 6/06/2014 às 4:13
  • e no seu caso, a função setTimeInterval seria chamada a partir de um dos seus handlers jquery =) Commented 6/06/2014 às 4:13
  • vou adicionar isso na resposta pra ela ficar mais completa ;-) Commented 6/06/2014 às 4:14
  • Não funciono muito bem (ou eu que não consegui aplicar)... Vou reeditar a pergunta pra voce entender melhor. Commented 6/06/2014 às 4:16

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 .