童年（图片JS响应版）

马黑黑

1 2 3 4 5 6

加林森

又换好玩的了。挺好的。制作好干净，画面挺好的。

马黑黑

锚不好使，就用JS来设定响应机制。和此前的帖子有所不同，一个 div 都不用，也不用 table，用的是自定义列表标签 dl及其子元素dt和dd。全帖代码如下：
<style type="text/css">

.pic-dl {
        margin: 0 auto;
        padding: 0;
        width: 700px;
        height: 580px;
        position: relative;
        border: 10px solid #d2c48c;
}
.pic-dt {
        position: absolute;
        width: 700px;
        height: 30px;
        right: 0;
        bottom: 0;
        background: #faebd7;
        text-align: center;
}
.pic-dt span {
        margin: 1px;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        text-decoration: none;
        text-align: center;
        color: #eee;
        background: rgba(0,0,0,.8);
        border-radius: 50%;
        cursor: pointer;
}
.pic-dt span:hover { opacity: 0.8; }
.pic-dt iframe {
        position: absolute;
        left: -50px;
        top: -50px;
        clip-path: circle(33px at 43px 43px);
        opacity: 0.8;
}
.pic-dd {
        margin: 0; padding: 0;
        width: 700px;
        height: 540px;
        display: flex;
        overflow: hidden;
        background: #eee;
}

.pic-dd img {
        width: 696px;
        height: 536px;
        border:2px solid #666;
        object-fit: cover;
}

</style>

<dl class="pic-dl">
        <dt class="pic-dt">
                <! 这一部分代码请复制十楼的 -->
                <iframe class="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=109530&auto=1&height=66"></iframe>
        </dt>
        <dd class="pic-dd">
                <img id="my_pic" src="https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg" alt="" />
        </dd>
</dl>

<script language="javascript">
var ar_pic = [
        "https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg",
        "https://638183.freep.cn/638183/Pic/2022/tn2.jpg",
        "https://pic.imgdb.cn/item/61f775e62ab3f51d91944802.jpg",
        "https://pic.imgdb.cn/item/61f7767c2ab3f51d9194cbd1.jpg",
        "https://pic.imgdb.cn/item/61f7772e2ab3f51d9195669c.jpg",
        "https://pic.imgdb.cn/item/61f777c02ab3f51d9195e21b.jpg"
];
function showpic(flag) {
        document.getElementById('my_pic').src = ar_pic[flag-1];
}
</script>



使用此代码，如果不需要更改外观，则只需两步：

一、img 标签填上一张图片地址，可以是6张图片以外的图片；
二、JS代码中小心一一填上6张图片的地址，不要破坏代码结构。

如果希望贴出更多的图片，则：① 参照span的HTML代码样式添加 span 标签；② 参照JS代码样式添加图片地址，中括号里，图片地址不是最后一个的都要有小角逗号收尾，最后一个不能有逗号。

马黑黑

加林森 发表于 2022-1-31 12:49
又换好玩的了。挺好的。制作好干净，画面挺好的。

代码及说明在三楼

加林森

马黑黑 发表于 2022-1-31 12:56
代码及说明在三楼

好的好的，我也去制作一个出来看效果。

马黑黑

加林森 发表于 2022-1-31 13:14
好的好的，我也去制作一个出来看效果。

支持

红影

用的是自定义列表标签 dl及其子元素dt和dd。

这个还没接触过。终于能在这里弄出来了，黑黑辛苦了

红影

        "https://638183.freep.cn/638183/Pic/2022/tn2.jpg",
        "https://638183.freep.cn/638183/Pic/2022/tn3.jpg",
        "https://638183.freep.cn/638183/Pic/2022/tn4.jpg",
        "https://638183.freep.cn/638183/Pic/2022/tn5.jpg",
        "https://638183.freep.cn/638183/Pic/2022/tn2.jpg"

这个没看懂，为什么主贴里看真的是6张图片，而这里看到的重复了tn2 并不是6张啊

加林森

马黑黑 发表于 2022-1-31 13:34
支持

我做出来。请你去看看。

马黑黑

我发布的代码中，span 代码论坛自动帮我过滤了一些内容，改了几次都一样。不知何因。看看单独发出来看看：

1.   <span onclick="showpic(1)">1</span>
   
2.                 <span onclick="showpic(2)">2</span>
   
3.                 <span onclick="showpic(3)">3</span>
   
4.                 <span onclick="showpic(4)">4</span>
   
5.                 <span onclick="showpic(5)">5</span>
   
6.                 <span onclick="showpic(6)">6</span>

复制代码

加林森

初一快乐！

马黑黑

加林森 发表于 2022-2-1 10:10
初一快乐！

同乐

加林森

马黑黑 发表于 2022-2-1 11:06
同乐

好的好的

马黑黑

加林森 发表于 2022-2-1 11:27
好的好的

加林森

马黑黑 发表于 2022-2-1 11:54

你来