|
|
本帖最后由 马黑黑 于 2022-1-30 11:33 编辑
这个帖子点击左列小图片不能在右边大图片展示区打开的原因是:小图片没有加载 onclick 事件的代码。小图的 onclick 点击事件调用JS中我定义的一个函数 showpic(idx),其中,showpic 是函数名,括号里的 idx 是函数接收的 id 变量,这个id指被点击的小图片的标识,标识正确的话,函数 showpic(inx) 就会获取小图片的图片地址并传递给大图展区,然后按预定场景或尺寸展现在右边。
下面是队长全帖的代码,红色部分是队长缺漏的,补上就正常了:
<style type="text/css">
.picMain {
margin: auto;
width: 720px;
position: relative;
background: linear-gradient(45deg, olive, green, silver, white, transparent);
padding: 10px;
box-shadow: 2px 2px 4px 1px rgba(0,0,0,.6);
display: flex;
flex-direction: row;
gap: 8px;
}
.picBox { flex-grow: 2; cursor: pointer; }
.picMini {
width: 150px;
display: flex;
flex-direction: column;
gap: 8px;
}
.picBox img {
width: 570px;
height: 730px;
object-fit: cover;
}
.picMini img {
width: 120px;
height: 140px;
border-radius: 50%;
opacity: .5;
cursor: pointer;
}
.picMini img:hover { opacity: 1; border-radius: 0;}
</style>
<div class="picMain">
<div class="picMini" id="picMini">
<img id="img1" onclick="showpic('img1')" src="https://pic.imgdb.cn/item/61f548982ab3f51d917cec95.jpg" alt="" />
<img id="img2" onclick="showpic('img2')" src="https://pic.imgdb.cn/item/61f546752ab3f51d917a8de8.jpg" alt="" />
<img id="img3" onclick="showpic('img3')" src="https://pic.imgdb.cn/item/61f5470c2ab3f51d917b3606.jpg" alt="" />
<img id="img4" onclick="showpic('img4')" src="https://pic.imgdb.cn/item/61f548332ab3f51d917c69af.jpg" alt="" />
<img id="img5" onclick="showpic('img5')" src="https://pic.imgdb.cn/item/61f540ef2ab3f51d9174c8c2.jpg" alt="" />
</div>
<div id="picBox" class="picBox"><img id="imgShow" alt="" src="https://pic.imgdb.cn/item/61f540ef2ab3f51d9174c8c2.jpg" /></div>
</div>
<audio id="auMusic" src="https://www.joy127.com/url/88427.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
var aud = document.getElementById('auMusic');
var imgSw = document.getElementById('imgShow');
function showpic(idx){ imgSw.src = document.getElementById(idx).src; }
imgSw.onclick = function() { aud.paused ? aud.play() : aud.pause(); }
</script>
|
|