图片走马灯的CSS实现方法

马黑黑

图片走马灯的CSS实现方法 | 马黑黑

由于微软创建的 marquee 标签已在 HTML5 中被废弃，图片走马灯类的展现效果需要另辟蹊径，CSS3 可以做到，而且不太难。这里跟大家分享一个简单的方法（方法其实不止一个）。

图片要滚动，首先需要一个场景，这个场景和图片的统一高宽一样，而且，它将是可以位于web页的任何地方，故此我们给它一个相对定位：

.mBox { /* 图片运动场所 */
        margin: 10px auto;
        width: 1200px;
        height: 600px;
        position: relative;
        overflow: hidden; /* 防止溢出 */
        border: 1px solid navy;
        box-shadow: 2px 2px 4px 1px #444;
}

overflow的hidden设置很重要，因为将来图片是并列装载的，宽度超出这个运动场所，必须将多余的尺寸裁剪掉，每一个时刻只允许显示一个固定宽度（本例1200px）。

下面，弄个装载图片的div，它将在HTML中作为上面 mBox 的子元素，我们给它命名为 pBox：

.pBox { /* 图片盒子 */
        position: absolute;
        display: flex; /* 弹性图片布局 */
        animation: Roll 25s linear infinite;
}

绝对定位，这个必须的，以免图片乱跑。display 的 flex 设定非常重要，它是图片排排坐不吃果果的布局手段，这是用了轴线布局 flex 的功能。盒子里还加了一个我们现在还没有设计的 animation 动画，动画名叫 Roll，25秒时长匀速循环播放，小盆友寒假看动画可以看个够。

.pBox盒子里的图片，尺寸要设置成和母框mBox盒子一样的高宽：

.pBox img { /* 图片统一样式 */
        width: 1200px;
        height:600px;
        float: left;
}

我们令图片左浮动（float: left;）以确保图片像看动画的小盆友一样乖乖滴排好队。

好了，小盆友们既然都已经排好了队，我们就来给图片设计动画：

@keyframes Roll { /* 动画设计 */
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
}

看，我们只用了 transform 的 translateX 功能，就做好动画了。就是水平移动，从 0 到 -50% 的变化，把 from 和 to 的值对换一下，图片走相反的方向。

嗯，很多时候，看到镁铝俺都直流口水，俺要暂停一下走马灯，好好欣赏镁铝。咋办？给图片盒子 pBox 设个开关：

.pBox:hover { /* 鼠标滑过：暂停动画 */
        cursor: pointer;
        animation-play-state: paused;
}

这里，用到了 animation 的播放状态 animation-play-state，paused 就是暂停。

下一步是HTML要干的活儿了，图片放多少随意，但不要太小气：

<div class="mBox">
        <div id="pBox" class="pBox">
                <img alt="" src="图片1" />
                <img alt="" src="图片2" />
        </div>
</div>

咦，还缺少啥？对，音乐，不能让小盆友看无声电影吧？现在又不是卓别林时代。就用 audio 自动播放行了，我们给它一个id，以便单击图片盒子时音乐能暂停，盒子也要有id哦（上面的HTML代码里已经有了）。

<audio id="ktv" src="音乐地址" loop="loop" autoplay="autoplay"></audio>

最后，编写一个单击图片盒子其实就是图片就能暂停音乐的JS脚本就万事大吉了：

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

马黑黑

演示效果：https://www.huachaowang.com/foru ... 6170&extra=page%3D1
演示帖代码：

1. <style type="text/css">
   
2. .mBox {
   
3.         margin: 10px auto;
   
4.         width: 1200px;
   
5.         height: 600px;
   
6.         position: relative;
   
7.         left: -304px;
   
8.         top: 80px;
   
9.         overflow: hidden;
   
10.         border: 1px solid navy;
    
11.         box-shadow: 2px 2px 4px 1px #444;
    
12. }
    
13. .pBox {
    
14.         position: absolute;
    
15.         animation: Roll 25s linear infinite;
    
16.         display: flex;
    
17. }
    
18. .pBox:hover {
    
19.         cursor: pointer;
    
20.         animation-play-state: paused;
    
21. }
    
22. .pBox img {
    
23.         width: 1200px;
    
24.         height:600px;
    
25.         float: left;
    
26. }
    
27. @keyframes Roll {
    
28.         from { transform: translateX(0); }
    
29.         to { transform: translateX(-50%); }
    
30. }
    
31. </style>
    
32. 
    
33. <div class="mBox">
    
34.         <div id="pBox" class="pBox">
    
35.                 <img alt="" src="https://638183.freep.cn/638183/Pic/xuehua.jpg" />
    
36.                 <img alt="" src="https://638183.freep.cn/638183/Pic/瀑布.jpg" />
    
37.                 <img alt="" src="https://638183.freep.cn/638183/Pic/greatwall.jpeg" />
    
38.                 <img alt="" src="https://638183.freep.cn/638183/Pic/dalandong.jpg" />
    
39.                 <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565988039.jpg" />
    
40.                 <img alt="" src="https://pic.imgdb.cn/item/61e439062ab3f51d91709901.jpg" />
    
41.                 <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565956399.jpg" />
    
42.                 <img alt="" src="https://638183.freep.cn/638183/75ed2e0a12a6fc4dc5571555de9b808c.jpeg" />
    
43.         </div>
    
44. </div>
    
45. <audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2021/11/19/6a87950b4ddc7a3aa1f9f828a0c69b0d.mp3" loop="loop" autoplay="autoplay"></audio>
    
46. 
    
47. <script language="javascript">
    
48. var ktv = document.getElementById('ktv');
    
49. document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
    
50. </script>

复制代码

图片我是乱凑的，精美的帖子是不能酱紫的:))

红影

又是很幽默风趣的语言，看得笑。想问一句，可以往上走动么？

红影

这个是图片盒子在滚动，带着图片跑的吧。

马黑黑

红影 发表于 2022-1-18 10:08
这个是图片盒子在滚动，带着图片跑的吧。

图片盒子代替了marquee，所以，你说得对

马黑黑

红影 发表于 2022-1-18 10:06
又是很幽默风趣的语言，看得笑。想问一句，可以往上走动么？

往上走往下走都可以，用 translateY 代替 translateX 便可，图片盒子的 display:flex; 属性还要设置个垂直方向，图片还有用 <br> 隔开

小辣椒

记得清明上河图这个以前我用代码做过的，现在有的特效代码不能显示了，以后换这个玩了，黑黑好分享

马黑黑

小辣椒 发表于 2022-1-18 12:38
记得清明上河图这个以前我用代码做过的，现在有的特效代码不能显示了，以后换这个玩了，黑黑好分享

这个用了CSS3标准，它不会过时

红影

马黑黑 发表于 2022-1-18 11:15
图片盒子代替了marquee，所以，你说得对

因为上次那个小球就是这样的

红影

马黑黑 发表于 2022-1-18 11:24
往上走往下走都可以，用 translateY 代替 translateX 便可，图片盒子的 display:flex; 属性还要设置个垂 ...

我是觉得风从东方来的帖子类型可以做成向上的

马黑黑

红影 发表于 2022-1-18 14:50
我是觉得风从东方来的帖子类型可以做成向上的

其实很少有人用上、下方向的，依据的是显示器的特性。手机可以翻转，也无不妥

马黑黑

红影 发表于 2022-1-18 14:49
因为上次那个小球就是这样的

图片和其他元素一样，一般都会有自己的父容器，不太有可能一个body就装图片。这里，为了便于控制，专门给图片找个房子

马黑黑

改为上下移动的需要修改三个地方即可：

第一：图片盒子 .pBox 中的红色那句要改——

.pBox {
        position: absolute;
        animation: Roll 25s linear infinite;
        display: flex; /* flex 改为  block */
}


第二：动画程序也需要改红色的地方，X 改为 Y，蓝色值对调一下也有惊喜——

@keyframes Roll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
}


第三：HTML中的图片部分，前面的都在行尾加 <br>，最后一个不用加——

                <img alt="" src="https://638183.freep.cn/638183/Pic/xuehua.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/瀑布.jpg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/greatwall.jpeg" /><br>
                <img alt="" src="https://638183.freep.cn/638183/Pic/dalandong.jpg" />


@红影 @小辣椒 @绿叶清舟

绿叶清舟

这个效果不错啊，就是不合算啊，一下就得做三四张图的了

马黑黑

绿叶清舟 发表于 2022-1-18 19:19
这个效果不错啊，就是不合算啊，一下就得做三四张图的了

至少三张嘛，你别太小气

绿叶清舟

马黑黑 发表于 2022-1-18 19:38
至少三张嘛，你别太小气

年底了口袋紧嘛

马黑黑

绿叶清舟 发表于 2022-1-18 19:40
年底了口袋紧嘛

晕，钱钱还不是印出来哦嘛

绿叶清舟

马黑黑 发表于 2022-1-18 19:45
晕，钱钱还不是印出来哦嘛

自己印不得犯法啊

马黑黑

绿叶清舟 发表于 2022-1-18 20:12
自己印不得犯法啊

印来玩玩可以的

红影

马黑黑 发表于 2022-1-18 17:36
其实很少有人用上、下方向的，依据的是显示器的特性。手机可以翻转，也无不妥

主要是为了学习这一方法啊，结果真的能实现呢