图片轮换循环滚播代码分享

马黑黑 · 发表于 2022-1-20 10:59

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

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

x

本帖最后由马黑黑于 2022-1-20 11:01 编辑

这是完整代码，效果请查看：https://www.huachaowang.com/foru ... 6217&extra=page%3D1

<style type="text/css">
/* 外层盒子宽度要与图片统一宽度一致*/
.mBox {
margin: 10px auto;
width: 700px;
height: 450px;
position: relative;
overflow: hidden;
border: 1px solid navy;
box-shadow: 2px 2px 4px 1px #444;
}
/* 图片盒子时长可修改
step是分步运行，多少张图就分多少步
*/
.pBox {
position: absolute;
animation: Roll 30s infinite steps(10,end);
display: block;
}
/* 图片盒子鼠标滑过 */
.pBox:hover {
cursor: pointer;
animation-play-state: paused;
}
/* 图片统一尺寸必须统一 */
.pBox img {
width: 700px;
height:450px;
float: left;
}
/* 动画 100%时的 top 值是依据所有图片高度总和
若横向变化用left, 100%是依据全部图片宽度总和
*/
@keyframes Roll {
0% { top: 0px; }
100% { top: -4500px; }
}
</style>
<div class="mBox">
<div id="pBox" class="pBox">
<img alt="" src="https://638183.freep.cn/638183/Pic/fj1.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj2.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj3.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj4.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj5.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj6.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj7.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj8.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj9.jpg" /><br>
<img alt="" src="https://638183.freep.cn/638183/Pic/fj10.jpg" />
</div>
</div>
<audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2021/12/30/45716ac7c13d7bfd471a155f0e3253cc.mp3" loop="loop" autoplay="autoplay"></audio>
<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>