css3实现幻灯片自动播放

短命女 2024-04-18 21:48 68阅读 0赞

# css3代码部分 #

<style>
         *{
             padding: 0;
             margin: 0;
         }
         .box{
             display: block;
             width: 300px;
             height: 70px;
             overflow: hidden;
         }
         ul{
             position: relative;
             left: -600px;
            display: block;
             width: 900px;
             height: 70px;
             animation:mylocation 5s infinite linear;
         }
         @keyframes mylocation{
             33%{
              padding-left: 300px;
             }
             44%{
                padding-left: 300px;
             }
             66%{
                 padding-left: 600px;
             }
             77%{
                padding-left: 600px;
             }
         }
         li{
             display: block;
             float: left;
             width: 300px;
             height: 70px;
         }
         li img{
             display: block;
             width: 300px;
             height: 70px;
         }
        </style>

# html代码部分 #

<div class="box">
            <ul>
                <li><img src="mc.png" alt=""></li>
                <li><img src="lb.jpg" alt=""></li>
                <li><img src="zgl.jpg" alt=""></li>
    
            </ul>
        </div>

效果：  
![在这里插入图片描述][20190912114051641.png]  
原理：设置一个盒子，把ul放到盒子里  
三个容纳图片的 li 在 ul 内水平排列  
ul的实际宽度是盒子宽度的三倍  
在盒子中使用 overflow: hidden;属性  
使ul超出盒子的部分不可见  
最后通过 ul 的 padding-left: ;属性改变左填充间距  
从而使 li 位置整体向后移  
通过动画效果改变li的位置从而达到幻灯片效果  
————————————————————————————————

# 实现连续无限滚动动画 #

上述效果会在下一次动画开始时有一小段的闪烁，为了解决闪烁需要：  
1.假设需要四张图片轮换播放  
![在这里插入图片描述][20190926091033597.png]  
需要为ul设置六个图片的宽度，并且在1，2，3，4图片后插入两张1，2  
设置一组动画改变margin为四张图片宽度，第一组动画结束后的效果为![在这里插入图片描述][20190926091214725.png]  
此时添加的 1，2在盒子中，且此时动画重新开始，盒子中的图片由1，2变为1，2就可以实现无闪烁轮播动画

[20190912114051641.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/59d6b32868f341a3885d38e98f9bfd39.png
[20190926091033597.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dc2dd345ec2a47e1b27b5db9fa1ac5a1.png
[20190926091214725.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a1d112a79b7a4a748ddc0002bdbd8426.png

发表评论取消回复

表情：

评论列表（有 0 条评论，68人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3实现幻灯片自动播放

css3代码部分 <style> *{ padding: 0; margin: 0; ...

短命女/ 2024年04月18日 21:48/ 0 赞/ 69 阅读

相关 CSS3实现的player播放按钮（实用）

原文出处：[https://blog.csdn.net/iteye\_18428/article/details/82324472][https_blog.csdn.net_i

叁歲伎倆/ 2023年06月23日 05:58/ 0 赞/ 5 阅读

相关 php实现自动播放ppt,JavaScript_jquery实现简单的自动播放幻灯片效果，本文实例讲述了jquery实现简单 - phpStudy...

jquery实现简单的自动播放幻灯片效果本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下： html部分： ![56586

旧城等待，/ 2023年01月17日 02:28/ 0 赞/ 128 阅读

相关 javascript 幻灯片代码(含自动播放)

参见：[https://www.runoob.com/w3cnote/javascript-slideshow.html][https_www.runoob.com_w3cno

￡神魔★判官ぃ/ 2022年10月17日 10:38/ 0 赞/ 184 阅读

相关 html图片轮播幻灯片,CSS3的animation实现简易幻灯片轮播特效

![5268f80b9b1e01f982625ef6fac83ca1.png][] 这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的

- 日理万妓/ 2022年10月06日 07:57/ 0 赞/ 218 阅读

相关 html幻灯片自动,html – 纯文本CSS幻灯片

我正在尝试为文本内容创建一个仅限CSS的幻灯片. 我有这个HTML / CSS： CSS text slideshow \slideshow \{ position:

偏执的太偏执、/ 2022年10月06日 03:58/ 0 赞/ 247 阅读

相关 android播放幻灯片控件,android幻灯片控件PPT

![68de93f5d7a4505370ca256542b5ecff.png][] PPT内容这是android幻灯片控件PPT，包括了基本控件关系图，TextView、

柔光的暖阳◎/ 2022年10月05日 13:48/ 0 赞/ 328 阅读

相关图片自动切换播放的一个效果（类似幻灯片播放）

首先，我们先来设置一个装自动切换播放图片的容器，给这个容器宽设为640px，高640px，并且让它上边距为100px，左右居中，再放入一张图片，设置图片不能重复，如果你还想让它

喜欢ヅ旅行/ 2022年04月23日 15:28/ 0 赞/ 319 阅读

相关使用css来实现幻灯片的效果

使用css来实现幻灯片的效果（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片思路：切换图片就是像上面js那样

╰半夏微凉°/ 2022年04月12日 12:59/ 0 赞/ 364 阅读

相关 css3动画实现最简单的幻灯片效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

约定不等于承诺〃/ 2021年09月19日 16:46/ 0 赞/ 355 阅读