图片走马灯的CSS实现方法

马黑黑 发表于 2022-1-18 09:24

本帖最后由马黑黑于 2022-1-18 09:44 编辑

图片走马灯的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>

马黑黑 发表于 2022-1-18 09:31

本帖最后由马黑黑于 2022-1-18 09:45 编辑

演示效果：https://www.huachaowang.com/foru ... 6170&extra=page%3D1
演示帖代码：
<style type="text/css">
.mBox {
   margin: 10px auto;
   width: 1200px;
   height: 600px;
   position: relative;
   left: -304px;
   top: 80px;
   overflow: hidden;
   border: 1px solid navy;
   box-shadow: 2px 2px 4px 1px #444;
}
.pBox {
   position: absolute;
   animation: Roll 25s linear infinite;
   display: flex;
}
.pBox:hover {
   cursor: pointer;
   animation-play-state: paused;
}
.pBox img {
   width: 1200px;
   height:600px;
   float: left;
}
@keyframes Roll {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }
}
</style>

<div class="mBox">
   <div id="pBox" class="pBox">
            <img alt="" src="https://638183.freep.cn/638183/Pic/xuehua.jpg" />
            <img alt="" src="https://638183.freep.cn/638183/Pic/瀑布.jpg" />
            <img alt="" src="https://638183.freep.cn/638183/Pic/greatwall.jpeg" />
            <img alt="" src="https://638183.freep.cn/638183/Pic/dalandong.jpg" />
            <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565988039.jpg" />
            <img alt="" src="https://pic.imgdb.cn/item/61e439062ab3f51d91709901.jpg" />
            <img alt="" src="https://638183.freep.cn/638183/Pic/mmexport1633565956399.jpg" />
            <img alt="" src="https://638183.freep.cn/638183/75ed2e0a12a6fc4dc5571555de9b808c.jpeg" />
   </div>
</div>
<audio id="ktv" src="http://www.kumeiwp.com/sub/filestores/2021/11/19/6a87950b4ddc7a3aa1f9f828a0c69b0d.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-18 10:06

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

红影发表于 2022-1-18 10:08

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

马黑黑 发表于 2022-1-18 11:15

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

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

马黑黑 发表于 2022-1-18 11:24

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

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

小辣椒 发表于 2022-1-18 12:38

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

马黑黑 发表于 2022-1-18 12:42

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

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

红影发表于 2022-1-18 14:49

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

因为上次那个小球就是这样的{:4_173:}

红影发表于 2022-1-18 14:50

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

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

马黑黑 发表于 2022-1-18 17:36

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

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

马黑黑 发表于 2022-1-18 17:38

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

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

马黑黑 发表于 2022-1-18 18:04

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

第一：图片盒子 .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

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

马黑黑 发表于 2022-1-18 19:38

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

至少三张嘛，你别太小气

绿叶清舟 发表于 2022-1-18 19:40

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

年底了口袋紧嘛

马黑黑 发表于 2022-1-18 19:45

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

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

绿叶清舟 发表于 2022-1-18 20:12

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

自己印不得犯法啊

马黑黑 发表于 2022-1-18 21:19

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

印来玩玩可以的

红影发表于 2022-1-18 22:31

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

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

页: [1] 2 3 4

花潮论坛's Archiver

图片走马灯的CSS实现方法