实现翻页图片展示的代码
时间: 2023-06-18 13:08:44 浏览: 60
你可以使用以下 HTML 和 CSS 代码实现翻页图片展示:
```html
<div class="gallery">
<div class="gallery-inner">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
<a class="prev" onclick="prevImage()">❮</a>
<a class="next" onclick="nextImage()">❯</a>
</div>
```
```css
.gallery {
position: relative;
margin: 20px auto;
width: 80%;
max-width: 1000px;
}
.gallery-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-inner img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}
.prev, .next {
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
cursor: pointer;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
```
JavaScript 代码如下:
```javascript
var currentImage = 0;
var images = document.querySelectorAll('.gallery-inner img');
function showImage(imageIndex) {
if (imageIndex >= images.length) {
imageIndex = 0;
} else if (imageIndex < 0) {
imageIndex = images.length - 1;
}
images[currentImage].style.display = 'none';
images[imageIndex].style.display = 'block';
currentImage = imageIndex;
}
function prevImage() {
showImage(currentImage - 1);
}
function nextImage() {
showImage(currentImage + 1);
}
showImage(currentImage);
```
这段代码使用了 JavaScript 来控制图片的显示与隐藏,通过点击左右箭头来翻页。你可以根据需要调整 CSS 样式和 JavaScript 代码来实现你想要的效果。