以下是一個簡單的實現JavaScript輪播圖的代碼示例：
<!DOCTYPE html><html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.slide img {
width: 100%;
height: 100%;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
function showSlide(n) {
slides[currentSlide].style.display = 'none';
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].style.display = 'block';
}
function prevSlide() {
showSlide(currentSlide - 1);
}
function nextSlide() {
showSlide(currentSlide + 1);
}
prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);
showSlide(currentSlide);
</script>
</body>
</html>
這段代碼使用了HTML和CSS來創建一個輪播圖容器，并通過JavaScript來控制輪播圖的切換。其中，.slide類設置為 display: none;來隱藏所有幻燈片，然后在 JavaScript 中，通過更改當前幻燈片的display屬性來顯示或隱藏幻燈片。.prev 和 .next類用于綁定點擊事件，以便在點擊“上一個”和“下一個”按鈕時切換幻燈片。
你可以將 image1.jpg、image2.jpg 和 image3.jpg替換為你自己的圖片路徑，以及根據需要調整樣式和布局。
