Temporizador para cada imagem no slideshow
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!
Discussão (2)
Carregando comentários...