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.
-
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– MiguelCommented 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. :(– Guilherme S. SantosCommented 22/11/2016 às 2:09
-
Percebi, coloquei em baixo uma possível resposta– MiguelCommented 22/11/2016 às 10:00
Adicione um comentário
|
1 Resposta
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>
-
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
-
-
muito obrigado @Miguel ! cara, muito obrigado msm! Commented 22/11/2016 às 15:27
-
-
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