Авто Слайд-шоу с чистым JS

Question

Мне нужно написать код для автоматического слайд-шоу JS без библиотеки. Но я застрял, как получить детей div с именем класса. (Новичок в веб-разработке)

    <button onclik="creatslideshow">aaa</button>



<p id="demo"></p>
    <div class="slideshow">
        <img src="img/kitten_1.jpg">
        <img src="img/kitten_2.jpg">
        <img src="img/kitten_3.jpg">
        <img src="img/kitten_4.jpg">
        <img src="img/kitten_5.jpg">
</div>

<script>
let elem1 = document.getElementsByClassName("slideshow");
createSlideshow(elem1);


var createSlideshow = function(slideshowElem) {

    let d = slideshowElem.children.length;//.children;
    document.getElementById("demo").innerHTML = d;


};
</script>

Answer 1

Вот, пожалуйста, запустите этот скрипт, делайте то, что вы хотите с детьми, но вот как вы получаете их в vanilla js.

let parent = document.getElementsByClassName('slideshow');
let children = parent[0].children;
console.log('Slideshow elem: ', parent);
console.log('Children elems: ', children);

В первой строке выбирается ваш элемент slideshow div с помощьюего имя класса.

Следующая строка let children = parent[0].children; получит все дочерние элементы (возвращаемые в виде массива) для родителя.Обратите внимание, что мы выбираем в позиции [0], так как мы ищем первый экземпляр элемента с именем класса slideshow.

Еще один способ выбрать элемент слайд-шоу, например, по id

<div class="slideshow" id="slideshow">

, а затем в js

let x = document.getElementById('slideshow');

Если вы зайдете в инструменты разработчика для своего браузера и посмотрите на первое сообщение журнала, если вы детализируете элемент, выможет видеть все атрибуты, связанные с этим элементом.

Счастливого взлома:)