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

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

本帖最后由 马黑黑 于 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>

红影 发表于 2022-1-20 12:01

这个好像是瞬间更换，不像之前的连续滚动的变化呢{:4_187:}

马黑黑 发表于 2022-1-20 12:06

红影 发表于 2022-1-20 12:01
这个好像是瞬间更换，不像之前的连续滚动的变化呢

一张一张地显示

红影 发表于 2022-1-20 13:09

马黑黑 发表于 2022-1-20 12:06
一张一张地显示

嗯嗯，原来加入语句后，效果就会发生变化{:4_204:}

马黑黑 发表于 2022-1-20 16:45

红影 发表于 2022-1-20 13:09
嗯嗯，原来加入语句后，效果就会发生变化

不同语句，不同效果

红影 发表于 2022-1-20 21:23

马黑黑 发表于 2022-1-20 16:45
不同语句，不同效果

这些语句太神奇了{:4_187:}

马黑黑 发表于 2022-1-20 21:23

红影 发表于 2022-1-20 21:23
这些语句太神奇了

是设计出来的

红影 发表于 2022-1-20 23:02

马黑黑 发表于 2022-1-20 21:23
是设计出来的

程序设计师很伟大。

马黑黑 发表于 2022-1-21 10:48

红影 发表于 2022-1-20 23:02
程序设计师很伟大。

一代又一代人努力的结果

红影 发表于 2022-1-21 11:12

马黑黑 发表于 2022-1-21 10:48
一代又一代人努力的结果

无数心血始练成，我们能直接去使用这些人的成果，太幸福了。

马黑黑 发表于 2022-1-21 11:17

红影 发表于 2022-1-21 11:12
无数心血始练成，我们能直接去使用这些人的成果，太幸福了。

是的
页: [1]
查看完整版本: 图片轮换循环滚播代码分享