使用jq实现通过左右箭头和点击按钮实现切换图片
时间: 2023-05-23 17:06:38 浏览: 175
A:
假设有一个包含图片路径的数组:
```json
{
"images": [
{"src": "path/to/image1.jpg"},
{"src": "path/to/image2.jpg"},
{"src": "path/to/image3.jpg"}
]
}
```
可以使用jq和jQuery实现图片切换功能:
```javascript
// 获取图片数组
var images = $(".images").data("images");
// 当前图片的索引
var currentIndex = 0;
// 显示当前图片
function showImage() {
var src = images[currentIndex].src;
$(".image").attr("src", src);
}
// 点击左箭头切换到上一张图片
$(".prev").click(function() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage();
});
// 点击右箭头切换到下一张图片
$(".next").click(function() {
currentIndex = (currentIndex + 1) % images.length;
showImage();
});
// 点击数字按钮切换到对应图片
$(".button").click(function() {
currentIndex = $(this).index();
showImage();
});
```
可以在HTML中添加以下代码:
```html
<div class="images" data-images='{
"images": [
{"src": "path/to/image1.jpg"},
{"src": "path/to/image2.jpg"},
{"src": "path/to/image3.jpg"}
]
}'>
<img class="image" src="path/to/image1.jpg">
<button class="prev"><</button>
<button class="next">></button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
</div>
```