jquery实现轮播图三张图片
时间: 2023-08-17 20:12:07 浏览: 60
以下是一个简单的 jQuery 轮播图实现示例,其中包含三张图片:
HTML 代码:
```html
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<div class="controls">
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.controls {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
width: 100px;
}
```
JavaScript 代码:
```javascript
$(function() {
var slideCount = $('.slider img').length;
var currentIndex = 0;
function showSlide(index) {
$('.slider img.active').removeClass('active');
$('.slider img').eq(index).addClass('active');
}
$('.next').click(function() {
currentIndex++;
if (currentIndex >= slideCount) {
currentIndex = 0;
}
showSlide(currentIndex);
});
$('.prev').click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = slideCount - 1;
}
showSlide(currentIndex);
});
});
```
该示例中,使用了 jQuery 的 click() 方法来绑定按钮的点击事件,轮播图的切换效果使用了 CSS3 的 transition 属性。