<!DOC
TYPE html>
<html lang=“zh
-CN”>
<head>
<meta charset=“UTF
-8”>
<meta http
-equiv=“X
-UA
-Compatible” content=“
IE=edge”>
<meta name=“v
iewport” content=“width=device
-width, initial
-scale=
1.0”>
<title>3D旋转立体相册源码（送给那个她）</title>
<
link rel=“
stylesheet” href=“index.css”>
<
link rel=“shortcut icon” href=“https://www.xfabe.com/favicon.ico”
type=“image/x
-icon” />
</head>
<body>
<!
-- 自动循环播放音乐（谷歌
浏览器内核除外）
-->
<audio src=“https://
links.xfyun.club/xfyun/fansisi.mp3” autoplay=“autoplay” loop=“loop” controls=“controls”></audio>
<!
-- 3d旋转的盒子
-->
<div class=“xf_3d_box”>
<!
-- 内部
-->
<ul class=“xf_rotate_
1”>
<!
-- 这里修改照片路径
-->
<
li><img src=“img/xw
1.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw2.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw3.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw4.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw5.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw6.jpg” alt=“女友照片”></
li>
</ul>
<!
-- 外部
-->
<ul class=“xf_rotate_2”>
<
li><img src=“img/xw
1.jpg” alt=“女友照片”></
li>
<
li><img src=“img/xw2.jpg” alt=“女友照片”></
li>
<!
-- 第三个和第四个隐藏了
-->
<
li><img src="img/xw3.jpg" alt="女友照片"></
li>
<
li><img src="img/xw4.jpg" alt="女友照片"></
li>
<
li><img src="img/xw5.jpg" alt="女友照片"></
li>
<
li><img src="img/xw6.jpg" alt="女友照片"></
li>
</ul>
</div>
<script>
let div = document.querySelector('.xf_3d_box'
)
let ul = document.querySelector('.xf_rotate_2'
)
let xfhusband = false
div.addEvent
Listener('c
lick', function (
) {
xfhusband = !xfhusband
if (xfhusband
) {
ul.
style.opacity =
1
}
else {
ul.
style.opacity = 0
}
console.log((xfhusband
));
}
)
</script>
</body>
</html>你帮我这个程序照片的展示效果进行优化升级一下 使他可以拥有更多的动态切换效果其他的不要动他
本文介绍了一种解决IE浏览器中li标签默认实心圆点不显示的问题，通过设置list-style-position:inside使list-style-type:disc生效。
扫一扫
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
