用jQuery写一个点击事件图片轮播图
时间: 2024-05-05 10:15:59 浏览: 15
以下是一个简单的jQuery图片轮播示例:
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>
<button class="prev">Prev</button>
<button class="next">Next</button>
```
CSS:
```
.slider {
position: relative;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
button {
margin-top: 20px;
}
```
jQuery:
```
$(document).ready(function() {
$('.slider img:first').addClass('active'); // 初始显示第一张图片
$('.next').click(function() {
var currentImg = $('.slider img.active');
var nextImg = currentImg.next();
if(nextImg.length) { // 如果有下一张图片,则切换到下一张
currentImg.removeClass('active');
nextImg.addClass('active');
} else { // 如果没有下一张图片,则切换到第一张
currentImg.removeClass('active');
$('.slider img:first').addClass('active');
}
});
$('.prev').click(function() {
var currentImg = $('.slider img.active');
var prevImg = currentImg.prev();
if(prevImg.length) { // 如果有上一张图片,则切换到上一张
currentImg.removeClass('active');
prevImg.addClass('active');
} else { // 如果没有上一张图片,则切换到最后一张
currentImg.removeClass('active');
$('.slider img:last').addClass('active');
}
});
});
```
这个示例使用了两个按钮来切换图片,点击“Next”按钮可以切换到下一张图片,点击“Prev”按钮可以切换到上一张图片。当切换到最后一张或第一张图片时,会循环切换回第一张或最后一张图片。