html轮播带缩略图,js带缩略图的图片轮播效果代码分享
时间: 2023-11-17 17:05:41 浏览: 72
以下是一种基于 HTML 和 JavaScript 的带缩略图的图片轮播效果代码实现:
HTML 代码:
```
<div class="slider">
<div class="slider-wrapper">
<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>
<div class="thumbnail-wrapper">
<div class="thumbnail"><img src="image1.jpg" alt="Image 1" /></div>
<div class="thumbnail"><img src="image2.jpg" alt="Image 2" /></div>
<div class="thumbnail"><img src="image3.jpg" alt="Image 3" /></div>
<div class="thumbnail"><img src="image4.jpg" alt="Image 4" /></div>
<div class="thumbnail"><img src="image5.jpg" alt="Image 5" /></div>
</div>
</div>
```
CSS 代码:
```
.slider {
position: relative;
margin: 0 auto;
width: 800px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
position: absolute;
top: 0;
left: 0;
width: 5000px;
height: 400px;
}
.slider-wrapper img {
float: left;
width: 800px;
height: 400px;
}
.thumbnail-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 800px;
height: 60px;
background-color: #fff;
border-top: 1px solid #ccc;
}
.thumbnail {
float: left;
margin: 10px;
width: 60px;
height: 40px;
overflow: hidden;
cursor: pointer;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all 0.3s ease-in-out;
filter: grayscale(100%);
}
.thumbnail.active img {
filter: grayscale(0%);
}
```
JavaScript 代码:
```
var sliderWrapper = document.querySelector('.slider-wrapper');
var thumbnails = document.querySelectorAll('.thumbnail');
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', function() {
var index = Array.prototype.indexOf.call(thumbnails, this);
sliderWrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
for (var j = 0; j < thumbnails.length; j++) {
thumbnails[j].classList.remove('active');
}
this.classList.add('active');
});
}
```
代码说明:
- HTML 代码中,`.slider` 为整个轮播容器,`.slider-wrapper` 为图片容器,包含多张图片。`.thumbnail-wrapper` 为缩略图容器,包含多个缩略图。每个缩略图对应一个图片。
- CSS 代码中,`.slider` 定义了轮播容器的样式,`.slider-wrapper` 定义了图片容器的样式,包含多张图片。`.thumbnail-wrapper` 定义了缩略图容器的样式,包含多个缩略图。
- JavaScript 代码中,首先获取了图片容器和缩略图元素,并为每个缩略图添加了点击事件。点击缩略图时,根据该缩略图的索引值计算出需要移动的距离,将图片容器向左移动相应距离,同时设置该缩略图为选中状态,其他缩略图为非选中状态。
希望这个例子能够帮助到你!