Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Chirlison

Temporizador para cada imagem no slideshow

Por , em Javascript

Recommended Posts

Chirlison    1

Chirlison
Postado

Bom dia a todos!

Pessoal, estou com esse slide no meu site, ele está funcionando perfeitamente.

O problema é que eu estou querendo colocar uma imagem para demorar mais que a outra para aparecer no slide.

 

Ex: Ao carregar a imagem 1.jpg, o tempo para pular para a imagem 2.jpg seja de 3 segundos e para passar da imagem 2.jpg para a imagem 3.jpg leve 5 segundos.

 

Infelizmente não estou conseguindo fazer isso, gostaria de saber se alguém sabe e pode me ajudar a fazer dessa forma.

 

Abaixo segue o código do slide:

 

Código javascript 

$(function(){
 
$('#slide img:eq(0)').addClass("ativo").show();
     var texto = $(".ativo").attr("alt");
    $('#slide').prepend("<p>"+texto+"</p>");
    setInterval(slide, 3000);
 
    function slide(){
 
     if($('.ativo').next().size()){
 
     $('.ativo').fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo"); 
     
     }else{
 
     $('ativo').fadeOut().removeClass("ativo");
     $('#slide img:eq(0)').fadeIn().addClass("ativo");
 
     }
 
     var texto = $('.ativo').attr('alt');
     $('#slide p').hide().html(texto).delay(500).fadeIn();
    }
});

Código css

* { 
margin:0; 
padding:0;
} 
 
#slide { 
width: 640px; 
overflow: hidden; 
height: 428px; 
margin: 50px auto; 
box-shadow: 0 0 8px #000; 
position: relative; 
} 
 
#slide img { 
position: absolute; 
z-index: 1; display: 
none; left: 0; 
} 
 
#slide p { 
z-index:2; 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
padding: 10px; 
font-family: Arial; 
font-size: 18px; 
background: rgba(0,0,0,0.5); 
color: #fff; 
}

Código html 

<!doctype html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title>Curso Jquery Básico</title>
    </head>
 
    <body>
 
        <figure id="slide"> 
            <img src="img/1.jpg" alt="Paisagem 1">
            <img src="img/2.jpg" alt="Paisagem 2"> 
            <img src="img/3.jpg" alt="Paisagem 3"> 
        </figure> 
      
    </body>
</html>
Desde já, muito obrigado a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

A ideia seria mais ou menos assim:

1- Define um data timer nos elementos de imagem, definindo quando tempo o slide atual deve ficar sendo exibido. Algo como:

<img src="img/1.jpg" alt="Paisagem 1" data-timer="3000">
<img src="img/2.jpg" alt="Paisagem 2" data-timer="3000">
<img src="img/3.jpg" alt="Paisagem 3" data-timer="5000">

2- No JS, ao inves de definir um setInterval, defina um setTimeout toda fez que o slide passar.

var timer;
$(function(){
  $('#slide img:eq(0)').addClass("ativo").show();
  var texto = $(".ativo").attr("alt");
  $('#slide').prepend("<p>"+texto+"</p>");
  
  timer = $(".ativo").next().data('timer');
  
  setTimeout(slide, timer);
  
  function slide(){
    if($('.ativo').next().size()){
      timer = $('.ativo').next().data('timer');
      $('.ativo').fadeOut().removeClass("ativo")
      .next().fadeIn().addClass("ativo");
      
    } else{
      timer = $('#slide img:eq(0)').data('timer');
      $('.ativo').fadeOut().removeClass("ativo");
      $('#slide img:eq(0)').fadeIn().addClass("ativo");
    }
    
    var texto = $('.ativo').attr('alt');
    $('#slide p').hide().html(texto).delay(500).fadeIn();
    
    setTimeout(slide, timer);
  }
});

3- Agora, uma versão melhorada:

var timer;
$(function(){
  $('#slide img:eq(0)').addClass("ativo").show();
  var texto = $(".ativo").attr("alt");
  $('#slide').prepend("<p>"+texto+"</p>");
    
  slide();
  
  function slide(){
    var $NEXT = $();
    var $ATUAL = $('.ativo');
    if($('.ativo').next().length){
      $NEXT = $('.ativo').next();
    } else{
      $NEXT = $('#slide img:eq(0)');
    }
    
    timer = $ATUAL.data('timer')
    
    setTimeout(function() {
      $ATUAL.fadeOut().removeClass("ativo");
      $NEXT.fadeIn().addClass("ativo");
      
      var texto = $NEXT.attr('alt');
      $('#slide p').hide().html(texto).delay(500).fadeIn();
      
      slide();
    }, timer);
  }
});


JSBins:

1- Sua implementação (ajustei a linha 12. Faltava o ponto no seletor - $('ativo') <-> $('.ativo'): http://jsbin.com/yufofelibu/1/edit?html,css,js,output

2- Implementação com setTimeout: http://jsbin.com/fifehenoto/1/edit?html,css,js,output

3- Implementação 'melhorada': http://jsbin.com/xocihutigi/1/edit?html,css,js,output

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito