0

O objetivo é um slider-show, porem quero criar um array dinâmico apenas listando algumas imagens dentro de uma div utilizando javascript puro, por exemplo:

<div class= "slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-3"/>
</div>

Entretanto não sei como percorrer as imagens desta div, pegar e salvar o valor do atributo src em um array.

2 Respostas 2

3

você pode utilizar um querySelectorAll para selecionar todas as imagens, então um map para montar o array.

//selecionar todos os elementos <img />  dentro de uma <div /> com à classe ".slider"
var elements = document.querySelectorAll("div.slider > img");

//realizando um mapeamento dos elementos <img />, criando um array com os valores da propriedade "src" destes elementos.
var imgs = [].map.call(elements, function (element, indice) {
  return element.src;
});

console.log(imgs);
<div class="slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-2"/>
</div>

2

Usando somente javscript puro, dá pra pegar todo as imagens com querySelectorAll

e depois varrendo o array e passando o src para outro vetor

//pegando todas as imagens dentro da div com classe .slider
var slider = document.querySelectorAll(".slider img");

var imagens_slider = [];

//varrendo array e pegando imagens do src para um novo array
for(cont=0; cont < slider.length; cont++){
   
  imagens_slider.push(slider[cont].src);
  
}

console.log(imagens_slider)
<div class= "slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-2"/>
</div>

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 .