Clique automático após 3 segundos

jonathanrn · Novembro 14, 2016

Bom dia,

Tenho um plugin Wordpress com essa estrutura em HTML, a imagem dentro de .image-block fica ao lado esquerdo em um tamanho grande e as imagens dentro de .right-block são outras imagens em miniatura que ao serem clicadas vai para .image-block do lado esquerdo, até ai tudo bem, mas agora essas imagens tem que ser alteradas sozinhas, pensei em um clique automático. Essa seria a melhor forma? caso for pode me auxiliar por favor?

<div class="popup-wrapper popup-wrapper_3" style="overflow-y: auto;">

	<div class="image-block_3 image-block ">
				
		<img alt="TITULO" id="wd-cl-img1" src="http://www.iranprogrammers.ir/file/pic/user/14.jpg">
							
	</div>

	<div class="right-block">

	      <h3 class="title">TITULO</h3>
			
	      <div>

	            <ul class="thumbs-list thumbs-list_3">

							
									
			<li class="active">
									
				<a href="" class="img-thumb" title="">
                                     <img src="http://s1-media.maxyart.com/media/users/rangga_effendi/66b846840965605b35c1ee4bdf824cbd.png">
                                </a>
									
			</li>

									
			<li>									

				<a href="" class="img-thumb" title="">
                                          <img src="http://s1-media.maxyart.com/media/users/rangga_effendi/66b846840965605b35c1ee4bdf824cbd.png">
                                </a>
									
			</li>

									
			<li>
									
				<a href="" class="img-thumb" title="">
                                    <img src="http://s1-media.maxyart.com/media/users/rangga_effendi/66b846840965605b35c1ee4bdf824cbd.png">
                                </a>
												
			</li>

									
		</ul>

	</div>


	</div>

				

</div>

Não conheço muito bem jquery, no máximo faço algumas navegações pelo DOM ao clicar... Mas disparar automaticamente como seria? :huh:

setInterval(slide,3000);

function slide() {
	$(".right-block div .thumbs-list li a img").next();
}

rafa2098 · Novembro 16, 2016

Não entendi, você já deu sua resposta... Setinterval

Klaider · Novembro 16, 2016

Eu recomendaria usar setTimeout ao invés de setInterval porque ambos são assíncronos. Melhor criar um intervalo usando setTimeout para executar um de cada vez (e reservar o identificador do mesmo timeout vai ser útil quando você quiser cancelar o mesmo com clearTimeout):

var lastSlideTimeout, $img

$img = $(".right-block div .thumbs-list li a img")

lastSlideTimeout = setTimeout(slide, 300)

function slide() {
	$img.next()
	lastSlideTimeout = setTimeout(slide, 300)
}

jonathanrn · Novembro 16, 2016

Não entendi, você já deu sua resposta... Setinterval

Eu recomendaria usar setTimeout ao invés de setInterval porque ambos são assíncronos. Melhor criar um intervalo usando setTimeout para executar um de cada vez (e reservar o identificador do mesmo timeout vai ser útil quando você quiser cancelar o mesmo com clearTimeout):
var lastSlideTimeout, $img;

$img = $(".right-block div .thumbs-list li a img");

lastSlideTimeout = setTimeout(slide, 300);

function slide() {
	$img.next();
	lastSlideTimeout = setTimeout(slide, 300);
}

Olá pessoal, primeiramente obrigado por responder. Então Sexy Yune dessa forma $img.next(); vai navegar para a próxima imagem de acordo com esse HTML sempre que a função repetir de acordo com time? Eu não consigo imaginar como ela vai reconhecer o primeiro .right-block div .thumbs-list li a img sem a ação click()

Klaider · Novembro 16, 2016

Olha, não conheço bem todos os métodos do jQuery, mas de acordo com isso, não, não vai navegar para próxima imagem. next serve para capturar um/uns próximo(s) elemento(s), por ex.:

<span id="primeiro">primeiro</span>
<b>text</b>

$("#primeiro").next() // [ <b>text</b> ]

Electronic · Novembro 18, 2016

setTimeout só executa uma vez

ele quer que se repita num intervalo de tempo entao é mesmo setInterval.

Simular o clique:

da uma olhada em trigger()

e o metodo next() aceita argumento que no caso seria onde estao as imagens

Klaider · Novembro 18, 2016

Eu sei, Electronic, mas é mais seguro que setInterval nesse contexto, porque é assíncrono ;), é melhor esperar a execução de cada rodada desse intervalo, diferente do que o setInterval faria.

E seria melhor ainda usar requestAnimationFrame dependendo do que a pessoa quer fazer.

Klaider · Novembro 22, 2016

setTimeout só executa uma vez

ele quer que se repita num intervalo de tempo entao é mesmo setInterval.

Simular o clique:

da uma olhada em trigger()

e o metodo next() aceita argumento que no caso seria onde estao as imagens