Jump to content
Sign in to follow this  
jonathanrn

Clique automático após 3 segundos

Recommended Posts

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();
}

Share this post


Link to post
Share on other sites

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)
}

Share this post


Link to post
Share on other sites

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()

Share this post


Link to post
Share on other sites

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> ]

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Webster Moitinho
      Implementei em meu site o JQuery Autocomplete e consegui fazer ele funcionar na boa. Porém não estou conseguindo fazer com que, quando o usuário pesquisar pelo termo, e selecionar na lista, ele seja direcionado para a respectiva página.
       
      Meu código está assim:
      <div id="pesquisa"> <form action="index.php?id=<?php echo $target; ?>&tp=smp" method="post" name="autocomplete" target="_self"> <strong>Pesquisa:</strong> <input id="autocomplete" title="Digite algo" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;Digite algo"> <button id="button-icon">Pesquise</button> </form> </div><!--pesquisa--> <script src="libraries/jquery.js"></script> <script src="libraries/jquery-ui.js"></script> <script> <?php $sql = "SELECT pags.id, pags.title, pags.keywords, pags.tema FROM pags WHERE vendavel = 'S' ORDER BY pags.id"; $resultado = $PDO->query( $sql ); $rows = $resultado->fetchAll(PDO::FETCH_ASSOC); ?> var availableTags = [ <?php foreach ($rows as $key => $linha) { $target = $linha['id']; echo '"' . $linha['title'] .' | ' . $linha['keywords'] . '",'; } ?> "" ]; $( "#autocomplete" ).autocomplete({ source: availableTags }); $( "#button" ).button(); $( "#button-icon" ).button({ icon: "ui-icon-gear", showLabel: false }); </script>  
    • By skti
      Boa tarde, me chamo Augusto e gostaria de saber como preencher o campo automaticamente seguindo o formato descrito no título.. por exemplo, ao digitar os 3 primeiros números do cpf, o '.' (ponto) ser preenchido automaticamente. Sou iniciante e o mais perto que cheguei foi criar um input que, quando são digitados 3 caracteres, apareça um '-' (hífen), ficando xxx- por exemplo, porém, de maneira incorreta pois ao continuar digitando o texto ficava xxxxxx- ao inves de xxx-xxx e assim por diante. Agradeço quem puder ajudar! :)
    • By s3c0
      Boa tarde galera,
       
      estou precisando que a barra superior acompanhe o Scroll. Está funcionando de acordo com o propósito, porém se der um Refresh no meio da página por exemplo, a barra superior não aparece.
       
      $("document").ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 68) { $('.topo').fadeIn(); $('.topo').css("position","fixed") $('.topo').css("z-index","2") $('.topo').css("margin-top","-68px") } else { $('.topo').css("position","absolute") $('.topo').css("z-index","1") $('.topo').css("z-index","2") $('.topo').css("margin-top","0px") } }); });  
      Alguém possui alguma ideia do que está errado?
    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By s3c0
      Olá amigos,
       
      estou tentando fazer um slide com JQUERY de troca de DIV, porém não estou conseguindo sem uso de plugins.
       
      A ideia seria a hora que abrir o modal, mostrar as "Colunas" 1 e 2, e com o tempo mudar para 3 e 4 em loop infinito.
      Coloquei 2 "botões" somente para ir testando o código, porém não consegui realizar o slide corretamente.
       
      Alguém teria alguma sugestão?
       
      <div class="modal_banner"> <a class="fechar_modal" onclick="javascript:close_modal_banner();"><svg aria-hidden="true" focusable="false" data-prefix="fas" id="btn_modal" width="30" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></a> <div class="topo_modal"> <span id="logo_modal"><img src="logo.png" width="150px"></span> <span id="texto_topo"><p>texto</p><span></div> <div style="top: 50%;left: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="seguinte" onclick="esquerda();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg></a></div> <div class="corpo_modal_banner"> <div class="product-item"> <div class="products-row" style=""> <div class="coluna" >1</div> </div> <div class="products-row" style=""> <div class="coluna" >2</div> </div> <div class="products-row" style=""> <div class="coluna">3</div> </div> <div class="products-row" style=""> <div class="coluna">4</div> </div> <div style="top: 50%;right: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="anterior" onclick="direita();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></a></div> </div> </div> </div> function esquerda(){ $('.products-row').hide("slide", { direction: "left" }, 500); }; function direita(){ $('.products-row').hide("slide", { direction: "right" }, 500); };  
      Agradeço a atenção de todos!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.