我有一个用JavaScript制作幻灯片的功能。在尝试添加功能时,在点击时更改幻灯片,我的功能停止工作,它有什么问题?完整代码on Khan Academy
var slideShow = function(container, time, effect) {
container = document.querySelector(container);
this.images = [];
this.curImage = 0;
if (effect === "click_fade") {
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.opacity = 0;
}
// Handle going to to the next slide
var nextSlideClick = function() {
for (var i = 0; i < this.images.length; i++) {
if (i != this.curImage) this.images[i].style.opacity = 0;
}
this.images[this.curImage].style.opacity = 1;
this.curImage++;
if (this.curImage >= this.images.length) this.curImage = 0;
window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
};
container.addEventListener("click", nextSlideClick)
}
nextSlide.call(this);
};
slideShow("#slideshow", 2000, "click_fade");
.slide {
transition: opacity 0.5s;
position: absolute;
top: 0;
}
<div id="slideshow">
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>
没有结果,出了什么问题?谢谢!
答案 0 :(得分:1)
您可以尝试以下操作:
<style>
.slide {
transition: opacity 0.5s;
position: absolute;
top: 0;
}
</style>
<div id="slideshow">
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>
<script>
var slideShow = function(container, time, effect) {
container = document.querySelector(container);
this.images = [];
this.curImage = 0;
if (effect === "click_fade") {
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.opacity = 0;
}
// Handle going to to the next slide
var nextSlideClick = function() {
for (var i = 0; i < this.images.length; i++) {
if (i != this.curImage) this.images[i].style.opacity = 0;
}
this.images[this.curImage].style.opacity = 1;
this.curImage++;
if (this.curImage >= this.images.length) this.curImage = 0;
window.setTimeout(nextSlideClick.bind(document.getElementById(this)), time);
};
container.addEventListener("click", nextSlideClick)
nextSlideClick.call(this);
}
};
slideShow("#slideshow", 2000, "click_fade");
</script>
在这个jsfiddle中做了一些小改动:Here