jquery点击图片切换
时间: 2023-11-20 13:57:44 浏览: 42
以下是一个使用jQuery实现点击图片切换的例子:
HTML代码:
```html
<div class="image-gallery">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
```
jQuery代码:
```javascript
$(function() {
var $gallery = $('.image-gallery');
var $images = $gallery.find('ul li');
var currentIndex = 0;
// 显示当前图片
function showImage() {
$images.hide().eq(currentIndex).show();
}
// 切换到下一张图片
function nextImage() {
currentIndex = (currentIndex + 1) % $images.length;
showImage();
}
// 切换到上一张图片
function prevImage() {
currentIndex = (currentIndex - 1 + $images.length) % $images.length;
showImage();
}
// 绑定按钮点击事件
$gallery.find('.prev').click(prevImage);
$gallery.find('.next').click(nextImage);
// 显示第一张图片
showImage();
});
```