js轮播图简单代码怎么写
以下是一个简单的实现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替换为你自己的图片路径，以及根据需要调整样式和布局。
阅读剩余
THE END
