jQuery一个div多张图片轮播另一个div
时间: 2023-08-19 19:38:46 浏览: 58
可以使用jQuery和CSS来实现一个div中多张图片轮播,同时控制另一个div的显示。具体实现步骤如下:
1. HTML结构:创建两个div,一个用于显示图片轮播,一个用于显示当前图片的缩略图。
```html
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="thumbnails">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
2. CSS样式:设置两个div的样式,其中slider div的position属性为relative,thumbnails div的position属性为absolute,left和bottom值都为0,使其位于slider div的底部。
```css
.slider {
position: relative;
width: 100%;
height: 400px;
}
.slider img {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.thumbnails {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.thumbnails img {
width: 50px;
height: 50px;
margin: 10px;
border: 2px solid #ccc;
cursor: pointer;
}
```
3. jQuery代码:使用jQuery实现图片轮播和点击缩略图切换图片的功能。
```javascript
$(document).ready(function() {
// 首先隐藏所有图片,除了第一张
$('.slider img').not(':first').hide();
// 点击缩略图切换图片
$('.thumbnails img').click(function() {
// 获取点击的图片的索引
var index = $(this).index();
// 显示对应索引的图片,隐藏其他图片
$('.slider img').eq(index).show().siblings().hide();
// 给当前缩略图添加样式,移除其他缩略图的样式
$(this).addClass('active').siblings().removeClass('active');
});
// 定时轮播图片
setInterval(function() {
// 获取当前显示图片的索引
var index = $('.slider img:visible').index();
// 如果是最后一张图片,则从第一张开始轮播
if (index == $('.slider img').length - 1) {
index = -1;
}
// 显示下一张图片,隐藏当前图片
$('.slider img').eq(index + 1).show().siblings().hide();
// 给对应的缩略图添加样式,移除其他缩略图的样式
$('.thumbnails img').eq(index + 1).addClass('active').siblings().removeClass('active');
}, 3000);
});
```
通过以上步骤,我们可以实现一个div中多张图片轮播,同时控制另一个div的显示。