队长的帖子

马黑黑 · 发表于 2022-1-31 21:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

1 2 3 4 5 6

马黑黑 · 发表于 2022-1-31 21:44

<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">
<span onclick="showpic(1)">1</span>
<span onclick="showpic(2)">2</span>
<span onclick="showpic(3)">3</span>
<span onclick="showpic(4)">4</span>
<span onclick="showpic(5)">5</span>
<span onclick="showpic(6)">6</span>
<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=141911&auto=1&height=66"></iframe>
</dt>
<dd class="pic-dd">
<img id="my_pic" src="https://Pic.imgdb.cn/item/61f773322ab3f51d9191c09d.jpg" alt="" />
</dd>
</dl>
<script language="javascript">
var ar_pic = [
"https://pic.imgdb.cn/item/61f773322ab3f51d9191c09d.jpg",
"https://pic.imgdb.cn/item/61f7750c2ab3f51d919384f5.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>