Timer com jQuery

[LucasFerreira_ 0]

Gostaria de saber como eu poderia adicionar um timer que, a cada 3 segundos, acontecesse os eventos $(".show1").click(), $(".show2").click(), $(".show3").click(), apontados no código abaixo.

 

Código HTML:

<div id="featurednews">
				<div id="slide1" class="selected">
					<div class="news">
						<div class="space">
							<h1><a href="">“Busão do Brasil” não deverá ganhar nova temporada na Band</a></h1>
							<p>O principal motivo foi a baixa audiência alcançada pela primeira edição do programa, que terminou na última terça (19) registrando modestos 2 pontos de média. O índice foi inferior ao da estreira, em 30 de julho, que marcou 3,3 pontos na Grande São Paulo...</p>
							<a href="" class="readmore">leia mais</a>
						</div>
						<div class="buttons">
							<a href="#" class="show1"><img src="images/layout/selectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show2"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show3"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
						</div>
					</div>
					<div class="newsshot">
						<a href=""><img src="images/news/medium/nw1.png" alt="Foto da Noticia" width="374" /></a>
					</div>
				</div>
				<div id="slide2" class="selected">
					<div class="news">
						<div class="space">
							<h1><a href="">“Teleton 2010” começa hoje</a></h1>
							<p>Nesta sexta-feira (5) começa a edição de 2010 do Teleton...</p>
							<a href="" class="readmore">leia mais</a>
						</div>
						<div class="buttons">
							<a href="#" class="show1"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show2"><img src="images/layout/selectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show3"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
						</div>
					</div>
					<div class="newsshot">
						<a href=""><img src="images/news/medium/nw2.png" alt="Foto da Noticia" width="374" /></a>
					</div>
				</div>
				<div id="slide3" class="selected">
					<div class="news">
						<div class="space">
							<h1><a href="">Record conta com apoio de cinco clubes para adquirir o Brasileirão</a></h1>
							<p>A Record está trabalhando nos bastidores para garantir os direitos do Campeonato Brasileiro de 2012. Para isso, vem mantendo conversas com o Clube dos 13, entidade que representa as maiores equipes de futebol do país, e com os clubes...</p>
							<a href="" class="readmore">leia mais</a>
						</div>
						<div class="buttons">
							<a href="#" class="show1"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show2"><img src="images/layout/unselectedslide.gif" alt="Slides" /></a>
							<a href="#" class="show3"><img src="images/layout/selectedslide.gif" alt="Slides" /></a>
						</div>
					</div>
					<div class="newsshot">
						<a href=""><img src="images/news/medium/nw3.png" alt="Foto da Noticia" width="374" /></a>
					</div>
				</div>
				<div class="clear"></div>
			</div>

Código CSS:

#featurednews {
		margin-bottom: 10px;
		min-height: 270px;
	}
	
		#featurednews .space {
			height: 180px;
		}
	
		#featurednews .box {
			max-height: 0;
			position: relative;
			top: -250px;
			z-index: 2;
		}
		
			#featurednews .box .news {
				display: none;
			}
		
			#featurednews .box .newsshot {
				display: none;
			}

		#featurednews .selected {
			background-color: #FFF;
			height: 250px;
			position: relative;
			top: 0;
			z-index: 3;
		}
		
			#featurednews .selected .news {
				float: left;
				height: 250px;
				padding: 10px;
				width: 580px;
			}
			
				#featurednews .selected .news h1 a {
					color: #000;
					font-family: padrao, 'Myriad Pro', 'Segoe UI', HelveticaNeue-Light, 'Helvetica Neue Light', 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif;
					font-size: 28px;
					font-weight: normal;
					text-decoration: none;
				}
				
					#featurednews .selected .news h1 a:hover {
						text-decoration: underline;
					}
				
				#featurednews .selected .news p {
					color: #666;
					font-family: "Segoe UI", "Trebuchet MS", Sans-Serif;
					font-size: 18px;
					margin: 10px 0 15px 0;
				}
				
				#featurednews .selected .newsshot {
					float: right;
					height: 250px;
					padding: 10px;
					width: 380px;
				}
				
					#featurednews .selected .newsshot img {
						-moz-box-shadow: 0 0 12px #999;
						-webkit-box-shadow: 0 0 12px #999;
						border: 3px solid #FFF;
					}
				
						#featurednews .selected .newsshot img:hover {
							border: 3px solid #D4EE5E;
						}

				
				#featurednews .selected a.readmore {
					background-color: #E1E1E1;
					border: 1px solid #CCCCCC;
					border-radius: 3px;
					color: #000;
					font-family: Verdana, Arial, Tahoma, Sans-Serif;
					font-size: 12px;
					padding: 3px 5px;
					text-decoration: none;
					text-shadow: #FFF 0 2px 1px;
				}
				
					#featurednews .selected a:hover.readmore {
						background: #E6E6E6;
					}
		
		#featurednews .buttons{
			position: relative;
			text-align: center;
		}
			
	.clear {
		clear: both;
	}

Código Javascript:

$(document).ready(function(){  
	$("#slide2").hide(0);
	$("#slide3").hide(0);
	$(".show1").click(function(){
		$("#slide2").fadeOut(0);
		$("#slide3").fadeOut(0);
		$("#slide1").fadeIn(500);
	});
	$(".show2").click(function(){
		$("#slide1").fadeOut(0);
		$("#slide3").fadeOut(0);
		$("#slide2").fadeIn(500);
	});
	$(".show3").click(function(){
		$("#slide1").fadeOut(0);
		$("#slide2").fadeOut(0);
		$("#slide3").fadeIn(500);
	});
});

[augustoclaro 2]

Olá!

use:

setInterval("funcao();funcao();funcao();",3000); //3000 = 1000 = 1 segundo

Espero que te ajude.

[LucasFerreira_ 0]

nao consegui usa-lo, pode exemplificar usando o codigo jquery meu?

[macielcr7 9]

você tentou assim?

$(document).ready(function(){  
        $("#slide2").hide(0);
        $("#slide3").hide(0);
    setInterval(    function(){$(".show1").click(function(){
                $("#slide2").fadeOut(0);
                $("#slide3").fadeOut(0);
                $("#slide1").fadeIn(500);
        });
        $(".show2").click(function(){
                $("#slide1").fadeOut(0);
                $("#slide3").fadeOut(0);
                $("#slide2").fadeIn(500);
        });
        $(".show3").click(function(){
                $("#slide1").fadeOut(0);
                $("#slide2").fadeOut(0);
                $("#slide3").fadeIn(500);
        });
		},3000);
});

[LucasFerreira_ 0]

Tentei sim, não funciona.

[augustoclaro 2]

$(document).ready(function(){  
        $("#slide2").hide(0);
        $("#slide3").hide(0);
        $(".show1").click(function(){
                $("#slide2").fadeOut(0);
                $("#slide3").fadeOut(0);
                $("#slide1").fadeIn(500);
        });
        $(".show2").click();function(){
                $("#slide1").fadeOut(0);
                $("#slide3").fadeOut(0);
                $("#slide2").fadeIn(500);
        });
        $(".show3").click(function(){
                $("#slide1").fadeOut(0);
                $("#slide2").fadeOut(0);
                $("#slide3").fadeIn(500);
        });

setInterval("$(".show1").click();$(".show3").click();",3000);
});

Espero que te ajude.

[LucasFerreira_ 0]

Não funcionou, ele até não "roda" as 2 primeiras linhas o Hide do slide 2 e 3. Ficam sendo exibido os 3 slides.