js图片轮播和点击切换
时间: 2024-05-07 11:20:44 浏览: 18
你可以使用 JavaScript 来实现图片轮播和点击切换。以下是一个简单的示例:
HTML 代码:
```
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<div class="buttons">
<button class="prev">Previous</button>
<button class="next">Next</button>
</div>
```
CSS 代码:
```
.slider {
position: relative;
height: 400px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.buttons {
margin-top: 10px;
}
```
JavaScript 代码:
```
// 获取元素
var slider = document.querySelector('.slider');
var slides = slider.querySelectorAll('img');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
// 设置初始状态
var currentSlide = 0;
slides[currentSlide].classList.add('active');
// 切换到下一张图片
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
// 切换到上一张图片
function prevSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + slides.length - 1) % slides.length;
slides[currentSlide].classList.add('active');
}
// 添加点击事件
nextButton.addEventListener('click', nextSlide);
prevButton.addEventListener('click', prevSlide);
```
这个示例中,我们使用了一个包含三张图片的轮播图,每张图片都有一个 `active` 类来控制其显示状态。我们还添加了两个按钮来切换图片,分别是“下一张”和“上一张”按钮。当我们点击这些按钮时,JavaScript 代码会调用 `nextSlide` 或 `prevSlide` 函数来切换图片。