js共三张图片,分别点击上一张或下一张按钮后能进行图片的切换 将代码及效果截图提交
时间: 2024-05-02 22:19:43 浏览: 15
好的,您可以参考以下代码实现图片切换的功能:
HTML代码:
```html
<div class="gallery">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
```
CSS代码:
```css
.gallery {
position: relative;
}
.gallery img {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100%;
height: auto;
}
.gallery img.active {
display: block;
}
.gallery button {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
font-size: 16px;
background: #fff;
border: none;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
```
JavaScript代码:
```javascript
var gallery = document.querySelector('.gallery');
var images = gallery.querySelectorAll('img');
var prevBtn = gallery.querySelector('.prev');
var nextBtn = gallery.querySelector('.next');
var currentImage = 0;
function showImage(n) {
images[currentImage].classList.remove('active');
currentImage = (n + images.length) % images.length;
images[currentImage].classList.add('active');
}
prevBtn.addEventListener('click', function() {
showImage(currentImage - 1);
});
nextBtn.addEventListener('click', function() {
showImage(currentImage + 1);
});
showImage(currentImage);
```
其中,.gallery是包含图片和按钮的容器,.prev和.next是分别代表上一张和下一张按钮的类名,.active是用来表示当前展示图片的类名。