[Resolvido] Content Slider

[LucasFerreira_ 0]

Gente, por favor, se puderem me ajudar.

 

O HTML é o seguinte:

<div id="featurednews">
	<div id="slide1" class="box selected">
		<div class="news">
			<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 class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw1.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
	<div id="slide2" class="box">
		<div class="news">
			<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 class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw2.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
	<div id="slide3" class="box">
		<div class="news">
			<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 class="readmore">leia mais</a>
		</div>
		<div class="newsshot">
			<a href=""><img src="images/news/medium/nw3.png" alt="Foto da Noticia" /></a>
		</div>
	</div>
</div>

Esse é o HTML de uma parte da página. Cada DIV com id slideN(slide1, slide2 e slide3) eu queria que aparecesse apenas uma de cada vez, o que eu fiz de inicio foi alterar o "z-index" onde o com a classe "selected" fosse o visivel.

 

Agora eu queria saber como eu posso fazer um menu (estilo o da imagem abaixo), onde cada bolinha alterava a DIV visível.

 

Se puderem me ajudar bastante com o código jQuery eu agradeço, pois não consegui aprender nada ainda (falta de tempo).

 

Não soube me expressar bem >< espero que entendam.

 

Obrigado.

[augustoclaro 2]

Há vários plugins prontos de banners rotativos. Acho que seria mais fácil pegar um deles.

 

(desculpe se não é isso que vce quer, mas foi isso que eu entendi)

[LucasFerreira_ 0]

É isso, mas os únicos que encontrei são usados imagens como os slides, no meu caso quero que as DIVs sejam os slides. Eu não saberia adaptar o código.

 

Espero ter sido mais claro.

[augustoclaro 2]

você quer animação? tipo ver eles andando pro lado e etc? se não, apenas use assim:

 

$("#bolinha1").click(function(){
$("#slider1").addClass("selected");
}

é algo assim que vce precisa?

[LucasFerreira_ 0]

Cara, acho que é isso sim! :P

 

E como faria para, a cada 5 segundos, alterar os slides?

 

Obrigado por ajudar :)

[augustoclaro 2]

se vce quiser fazer tudo com JQuery, recomendo que vce baixe o PlugIn everytime

http://jquery.offput.ca/every/

 

aí você cria duas array, uma com o id das bolinhas, e outra com o id dos sliders. sendo que a bolinha um tem que ter o mesmo índice do slider1.

 

aí você cria uma variável que começa no zero, e a cada 5 segundos ela aumenta 1, ou, caso esteja no máximo, volte pra zero, e usa ela como índice para ativar o .click() da bolinha.

 

Se não entendeu nada (eu não entenderia, por que não sei explicar direito as coisas) fala que eu faço alguma coisa pra você

[LucasFerreira_ 0]

Não, consegui entender, sim. Muito obrigado : )

 

Como marca o tópico como respondido? Ou só a moderação pode?

[augustoclaro 2]

só moderação