想要实现的效果是点击右边的小图，左边出现相对应的大图，但是点击右边的小图，左边出现的大图一直是最后一张图片，F12查看 i的是3
JS代码
2
527//点击右边的小图，左边出现大图
$(document).ready( function() {
$('#piece_content a img').on('click', function() {//给小图片添加点击事件
var len = $('#piece_content a img').length;//获取小图片的个数
for (var i = 0; i < len; i++) {//遍历小图片
$('.viewinfo img').attr('src','../images/water-fall-sub' +i+ '.jpg');//大图片的src值改变
};
});
});修改了下JS代码还是无效
$(document).ready( function() {
var len = $('#piece_content a img').length;//获取小图片的个数
//给小图片添加点击事件
for(var i=0;iHTML代码
RunJS 演示代码
土巴兔装修家具
飘窗，心情的画板
土巴兔装修家居
CSS代码
.view-part {
margin-bottom: 30px;
margin-top: 20px;
}
.viewinfo {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
margin: 0 15px;
padding-bottom: 15px;
}
.viewinfo-large {
width: 650px;
}
.viewinfo h3 {
font-size: 18px;
color: #888;
margin-left: 15px;
}
.viewinfo ul li a {
color: #888;
}
.viewinfo #hot-list span {
color: #888;
}
.share-text {
margin-right: 10px;
margin-top: 5px;
}
.share-btn {
background: url(../images/share_icon.svg) 6px 4px no-repeat;
height: 34px;
width: 34px;
}
.share-btn.qzone {
background-position: 6px -36px;
}
.share-btn.weixin {
background-position: 6px -276px;
}
.viewside {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
margin-left: 15px;
width: 428px;
}
.piece-head {
margin: 15px 0;
}
.piece-head img{
width: 38px;
height: 38px;
margin-right: 15px;
}
.piece-head span {
font-size: 12px;
}
.piece-content {
padding-top: 15px;
}
.piece-content a {
display: inline-block;
}
.piece-content a img {
width: 180px;
height: 198px;
margin-bottom: 15px;
}
.piece-content a:nth-child(2n) {
padding-left: 10px;
}
.vieside-same {
border: 1px solid #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
width: 428px;
margin-right: 15px;
margin-top: 20px;
padding: 15px;
}
.vieside-same p {
padding-bottom: 20px;
}
.text-line {
margin-bottom: 10px;
text-decoration: underline;
text-shadow: 0 1px 3px rgba(204,204,204,.5);
padding-bottom: 20px;
}
.board {
position: relative;
}
.board-name {
position: absolute;
top: 15px;
left: 30px;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.board .link img {
float: left;
width: 74px;
height: 74px;
margin: 5px;
}
.board .link .large {
width: 242px;
height: 236px;
text-align: center;
}
.board-info {
margin: 5px;
}
.board-info a {
float: left;
margin-top: 12px;
font-size: 12px;
line-height: 24px;
}
.board-info a.person {
margin-right: 10px;
}
.board-info button {
background: linear-gradient( #FAFAFA, #F2F2F2);
border: 1px solid #D9D9D9;
color: #888;
}
.board-info button:hover {
background: linear-gradient(#FFF, #F7F7F7);
box-shadow: inset 0 1px 0 white,0 1px 0 rgba(255,255,255,.05);
border: 1px solid #CCC;
}
.person {
width: 24px;
height: 24px;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你的js没必要进行循环，只需要给某个标签绑定上事件，那么当前所有的标签都有这个事件了，js可以这样写：
还有种思路，在小图片<img src="缩略图.jpg" alt="原图.jpg" /> 加上alt或者别的什么，里面存上原图的地址