4个div div里分别存放一张照片 点击照片改变照片 一共13张照片 用jquery写
时间: 2024-03-24 11:40:52 浏览: 12
可以使用以下的代码:
HTML结构:
```html
<div class="photo">
<img src="photo1.jpg">
</div>
<div class="photo">
<img src="photo2.jpg">
</div>
<div class="photo">
<img src="photo3.jpg">
</div>
<div class="photo">
<img src="photo4.jpg">
</div>
```
jQuery代码:
```javascript
$(document).ready(function() {
var photos = [
"photo1.jpg",
"photo2.jpg",
"photo3.jpg",
"photo4.jpg",
"photo5.jpg",
"photo6.jpg",
"photo7.jpg",
"photo8.jpg",
"photo9.jpg",
"photo10.jpg",
"photo11.jpg",
"photo12.jpg",
"photo13.jpg"
];
$(".photo").click(function() {
var currentPhoto = $(this).find("img").attr("src");
var currentIndex = photos.indexOf(currentPhoto);
var nextIndex = (currentIndex + 1) % photos.length;
var nextPhoto = photos[nextIndex];
$(this).find("img").attr("src", nextPhoto);
});
});
```
解释:
首先,我们定义了一个包含所有照片文件名的数组。然后,我们使用 jQuery 的 click() 方法来监听每个照片 div 的点击事件。在点击事件处理函数中,我们首先获取当前照片的文件名,然后计算下一张照片的文件名。为了实现循环切换照片,我们使用了取余运算符。最后,我们将下一张照片的文件名设置为当前照片的 src 属性值,从而实现照片的切换。