Не срабатывают querySelectorAll и getElementsByClassName
Приветствую! Подскажите, что не так:
<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>
Заранее спасибо :) |
samdo,
в querySelectorAll нет childElementCount и children |
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>
|
А что такое у вас container.childElementCount и container.children?
Вы же ищете несколько элементов document.querySelectorAll("#tv1, #tv2, #tv3"). Вам возвращается список (NodeList) из нескольких элементов. А вы обращаетесь к нему, как к одному элементу. Вы вызываете slideShow(slike); В качестве this передается window (т.к. нет 'use strict'). И что внутри функции будет this.images? nextSlide.call(this); - это зачем? Какой смысл window передавать через this. |
Спасибо! Но, немного не то. В данном случае скрытыми по очереди становятся блоки с классом tabcontent, а должны изображения внутри них. Т.е. это скрипт смены изображений внутри оного 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>
|
Преогромнейшая благодарность, как всегда .... выручили :)
|
| Часовой пояс GMT +3, время: 08:16. |