要實現JavaScript幻燈片播放功能,可以使用以下步驟:
<div id="slideshow">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
</div>
#slideshow {
width: 100%;
height: 400px;
overflow: hidden;
}
#slideshow img {
width: 100%;
height: 400px;
display: none;
}
var slides = document.querySelectorAll('#slideshow img');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);
function nextSlide() {
slides[currentSlide].style.display = 'none';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.display = 'block';
}
function prevSlide() {
slides[currentSlide].style.display = 'none';
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
slides[currentSlide].style.display = 'block';
}
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
通過以上步驟,就可以實現一個簡單的JavaScript幻燈片播放功能。您可以根據自己的需求對樣式和邏輯進行進一步的定制和擴展。