《知道不知道》--侃侃 TO：红影

加林森

红影 发表于 2022-1-29 22:29
谢谢队长好帖，真好看。这个点小图怎么不能切换到大图啊

不知道啊

加林森

杨柳青 发表于 2022-1-29 22:52
队长的小苹果唱的吧~~

你皮痒了？

马黑黑

我的edge浏览器不行，肯定也跟 getElementById 中的Id有关，I有大写

马黑黑

加林森 发表于 2022-1-29 22:48
百度有的

是么

加林森

马黑黑 发表于 2022-1-29 23:37
是么

我知道我的图片为什么点不开了，我都是制作的宽512、高633的了。

加林森

马黑黑 发表于 2022-1-29 23:36
我的edge浏览器不行，肯定也跟 getElementById 中的Id有关，I有大写

知道原因了，我重新制作一个出来。

樵歌

加林森 发表于 2022-1-29 21:42
哈哈，想啥呢？

想美丽的风景线呵。

樵歌

加林森 发表于 2022-1-29 22:04
现在来看看，5个大美女。

好呀。

樵歌

点了放不大。

加林森

樵歌 发表于 2022-1-30 10:45
点了放不大。

正在找原因。

加林森

樵歌 发表于 2022-1-30 10:43
想美丽的风景线呵。

好的好的。

加林森

樵歌 发表于 2022-1-30 10:44
好呀。

嗯嗯

马黑黑

加林森 发表于 2022-1-30 09:49
知道原因了，我重新制作一个出来。

嗯嗯

马黑黑

加林森 发表于 2022-1-30 09:46
我知道我的图片为什么点不开了，我都是制作的宽512、高633的了。

哦，尺寸没关系吧

加林森

马黑黑 发表于 2022-1-30 11:07
哦，尺寸没关系吧

我怎么找不到错原因呢？

加林森

马黑黑 发表于 2022-1-29 21:50
图片同一张？

这个我的代码，老黑帮着看看是哪里错了。

<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" src="https://pic.imgdb.cn/item/61f548982ab3f51d917cec95.jpg" alt="" />
                <img id="img2" src="https://pic.imgdb.cn/item/61f546752ab3f51d917a8de8.jpg" alt="" />
                <img id="img3" src="https://pic.imgdb.cn/item/61f5470c2ab3f51d917b3606.jpg" alt="" />
                <img id="img4" src="https://pic.imgdb.cn/item/61f548332ab3f51d917c69af.jpg" alt="" />
                <img id="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>

马黑黑

这个帖子点击左列小图片不能在右边大图片展示区打开的原因是：小图片没有加载 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>

马黑黑

加林森 发表于 2022-1-30 11:10
这个我的代码，老黑帮着看看是哪里错了。

你看我在37楼的回复，能彻底解决问题

加林森

马黑黑 发表于 2022-1-30 11:22
这个帖子点击左列小图片不能再右边大图片展示区打开的原因是：小图片没有加载 onclick 事件的代码。小图的  ...

谢谢老黑，我马上修改。

马黑黑

加林森 发表于 2022-1-30 11:08
我怎么找不到错原因呢？

我帮你找到了：我坐电梯直达你的帖子代码，检查了以便，发现了问题。建议在37楼吧。