1

Olá, como faço para mudar o src de uma imagem quando eu clicar em um link avançar? possuo uma longa lista de imagens e gostaria de ir avançando conforme a quantidade de imagens nessa pasta, ao invés de por um por um que seria além de exaustivo um processo limitado, visto para acrescentar e remover precisaria editar o html. Caso não seja possível, pelo menos vincular o valor de uma variavel js a uma "pagina" e baseado nisso acessar uma lista xml com os links.

3
  • Guilherme não percebi bem, será algo como isso jsfiddle.net/bwoep3wL? Se for diga-me aqui, escreva "@Miguel sim/não é isso..." para eu ser notificado e publicar ou não isso como resposta
    – Miguel
    Commented 20/11/2016 às 15:31
  • @Miguel é mais ou menos isso, mas o que acontece é que não quero deixar as imagens já carregadas, pois já tenho um sistema de busca em paralelo que troca o src. Enfim, minha ideia é ter uma lista,um switch "case var =2" troca src da id "imagemTroca" e o botão troca ativa uma função var +1. só não sei juntar isso. pq não sei aonde guardar esse valor. pq se eu defino com a var = 0 no inicio, ela vai resetar td vez que eu apertar o botão proximo. :( Commented 22/11/2016 às 2:09
  • Percebi, coloquei em baixo uma possível resposta
    – Miguel
    Commented 22/11/2016 às 10:00

1 Resposta 1

2

Podes começar guardando as imagens num array, e carregando as imagens de n em n, que neste caso n é num_imgs:

var imgs = [
  'http://www.acuitytraining.co.uk/wp-content/uploads/2015/05/SQL-logo-transparent.png',
  'http://wlpapers.com/images/java-logo-1.jpg',
  'https://www.python.org/static/community_logos/python-logo-master-v3-TM.png',
  'https://4.bp.blogspot.com/-DDh4SMSu11Y/V2KCoeDpmxI/AAAAAAAAAjI/Mz5H8C3GwAM7yK13YLxMj63-BgvVpQNgACLcB/s1600/C2BProgramming2Blanguages.png',
  'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSvk-hgB0ZbEFOIMYVX2-9DXaaucobhwd0aRWmB6t29Bcs3DvdQXAdZf3s',
  'http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/0015/1781/brand.gif?itok=23onNH3m',
  'http://3.bp.blogspot.com/-PTty3CfTGnA/TpZOEjTQ_WI/AAAAAAAAAeo/KeKt_D5X2xo/s1600/js.jpg',
  'http://www.qualitycompass.com/css/images/haskell-logo-with-name.png'
];
var num_imgs = 3;
var next_three = num_imgs;
var next_imgs;
for(var i = 0; i < num_imgs; i++) {
	$('#imgs_wrapper').append('<img class="img_change" src="' +imgs[i]+ '">');
}
$('#next_imgs').on('click', function() {
  next_imgs = imgs.slice(next_three, next_three + num_imgs);
  if(next_imgs.length === 0) {
	next_three = 0;
  	next_imgs = imgs.slice(next_three, next_three + num_imgs);
  }
  $('.img_change').each(function() {
	if(typeof next_imgs[$(this).index()] === 'undefined') {
		$(this).hide();
		return true; // continue
	}
	$(this).show();
	$(this).prop('src', next_imgs[$(this).index()]);
  });
  next_three += num_imgs;
});
.img_change {
 width: 50px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imgs_wrapper">

</div>
<div>
  <button id="next_imgs">proximas</button>
</div>

JSFIDDLE

7
  • Perfeito! Me ajudou muitíssimo! Só mais uma dúvida, para fazer um botão voltar, só substituir o + por - ? Commented 22/11/2016 às 14:20
  • @GuilhermeS.Santos , veja se ajuda jsfiddle.net/bwoep3wL/2
    – Miguel
    Commented 22/11/2016 às 14:52
  • muito obrigado @Miguel ! cara, muito obrigado msm! Commented 22/11/2016 às 15:27
  • @GuilhermeS.Santos, de nada ainda bem que resolveu
    – Miguel
    Commented 22/11/2016 às 15:28
  • só mais uma coisa, o botão prev, tá pulando algumas paginas, o avançar vai de um em um, porém para voltar, ele pula umas imagens, aleatoriamente. bem estou usando uma só img_change e mudei o valor de num_img pra 1. quer que eu crie outra pergunta, pra computar sua resposta? Commented 22/11/2016 às 15:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .