Форум

samdo · #1 (**permalink**) 20.04.2023, 14:40

Приветствую! Подскажите, что не так:

<div>
	<div id="tv1" class="tabcontent" style="display: block;">
		<img src="./img/img1.jpg" alt="">
		<img src="./img/img2.jpg" alt="">
	</div>
	<div id="tv2" class="tabcontent">
		<img src="./img/img3.jpg" alt="">
		<img src="./img/img4.jpg" alt="">
	</div>
	<div id="tv3" class="tabcontent">
		<img src="./img/img5.jpg" alt="">
		<img src="./img/img6.jpg" alt="">
	</div>
</div>

<script>
var slideShow = function(container) {
    this.images = [];
    this.curImage = 0; 
    for (i = 0; i < container.childElementCount; i++) {
        this.images.push(container.children[i]);
        this.images[i].style.display = "none";
    }
    
    // Handle going to to the next slide
    var nextSlide = function() {
        for (var i = 0; i < this.images.length; i++) {
            this.images[i].style.display = "none";
        }
        this.images[this.curImage].style.display = "block";
        this.curImage++;
        if (this.curImage >= this.images.length) {
            this.curImage = 0;
        }
        window.setTimeout(nextSlide.bind(this), 5000);
    };
    
    nextSlide.call(this);
};
var slike = document.querySelectorAll("#tv1, #tv2, #tv3");
slideShow(slike);	
</script>

Заранее спасибо

рони · #2 (**permalink**) 20.04.2023, 16:02

samdo,
в querySelectorAll нет childElementCount и children

рони · #3 (**permalink**) 20.04.2023, 16:05

samdo,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .tabcontent {
            display: none;
        }

        .tabcontent.show {
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <div id="tv1" class="tabcontent">1
            <img src="./img/img1.jpg" alt="">
            <img src="./img/img2.jpg" alt="">
        </div>
        <div id="tv2" class="tabcontent">2
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.jpg" alt="">
        </div>
        <div id="tv3" class="tabcontent">3
            <img src="./img/img5.jpg" alt="">
            <img src="./img/img6.jpg" alt="">
        </div>
    </div>
    <script>
        var slideShow = function(container) {
            this.images = container;
            this.curImage = this.images.length - 1;
            var nextSlide = function() {
                this.images[this.curImage].classList.remove("show");
                this.curImage = ++this.curImage % this.images.length;
                this.images[this.curImage].classList.add("show");
                window.setTimeout(nextSlide.bind(this), 5000);
            };

            nextSlide.call(this);
        };
        var slike = document.querySelectorAll("#tv1, #tv2, #tv3");
        slideShow(slike);
    </script>
</body>

</html>

voraa · #4 (**permalink**) 20.04.2023, 16:07

А что такое у вас container.childElementCount и container.children?
Вы же ищете несколько элементов document.querySelectorAll("#tv1, #tv2, #tv3").
Вам возвращается список (NodeList) из нескольких элементов. А вы обращаетесь к нему, как к одному элементу.

Вы вызываете slideShow(slike); В качестве this передается window (т.к. нет 'use strict'). И что внутри функции будет this.images?

nextSlide.call(this); - это зачем? Какой смысл window передавать через this.

samdo · #5 (**permalink**) 20.04.2023, 20:56

Спасибо! Но, немного не то. В данном случае скрытыми по очереди становятся блоки с классом tabcontent, а должны изображения внутри них. Т.е. это скрипт смены изображений внутри оного div.

рони · #6 (**permalink**) 20.04.2023, 21:23

Сообщение от samdo

скрипт смены изображений внутри оного div.

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .tabcontent img {
            display: none;
        }
        .tabcontent img.show {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <div id="tv1" class="tabcontent">1
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
        <div id="tv2" class="tabcontent">2
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
        <div id="tv3" class="tabcontent">3
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
    </div>
    <script>
        const slideShow = function(container) {
            container.forEach(({
                children
            }) => {
                let len = children.length
                let curImage = len - 1;
                const nextSlide = () => {
                    children[curImage].classList.remove("show");
                    curImage = ++curImage % len;
                    children[curImage].classList.add("show");
                    window.setTimeout(nextSlide, 5000);
                };
                nextSlide()
            })
        };
        const slike = document.querySelectorAll(".tabcontent");
        slideShow(slike);
    </script>
</body>
</html>

samdo · #7 (**permalink**) 20.04.2023, 21:33

Преогромнейшая благодарность, как всегда .... выручили

Форум

Справочник

Discord чат

Курсы javascript