锚不好使，就用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代码样式添加图片地址，中括号里，图片地址不是最后一个的都要有小角逗号收尾，最后一个不能有逗号。

前一篇: JS教程四——动态创建元素
下一篇: JS教程之六——for语句