《知道不知道》--侃侃 TO：红影 - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2022-1-29 23:01

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

不知道啊

加林森 发表于 2022-1-29 23:02

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

你皮痒了？{:4_186:}

马黑黑 发表于 2022-1-29 23:36

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

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

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

是么

加林森 发表于 2022-1-30 09:46

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

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

加林森 发表于 2022-1-30 09:49

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

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

樵歌发表于 2022-1-30 10:43

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

想美丽的风景线呵。{:4_189:}

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

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

好呀。{:4_205:}

樵歌发表于 2022-1-30 10:45

点了放不大。{:4_203:}

加林森 发表于 2022-1-30 10:46

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

正在找原因。

加林森 发表于 2022-1-30 10:47

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

好的好的。{:4_189:}

加林森 发表于 2022-1-30 10:47

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

嗯嗯

马黑黑 发表于 2022-1-30 11:06

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

嗯嗯

马黑黑 发表于 2022-1-30 11:07

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

哦，尺寸没关系吧

加林森 发表于 2022-1-30 11:08

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

我怎么找不到错原因呢？{:5_113:}

加林森 发表于 2022-1-30 11:10

马黑黑发表于 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>

马黑黑 发表于 2022-1-30 11:22

本帖最后由马黑黑于 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>

马黑黑 发表于 2022-1-30 11:24

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

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

加林森 发表于 2022-1-30 11:24

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

谢谢老黑，我马上修改。{:4_190:}

马黑黑 发表于 2022-1-30 11:25

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

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

页: 1 [2] 3

花潮论坛's Archiver