css3实现轮播2

实现效果：

图片轮播，实现图片整体切换效果

基本原理：

总共用10秒，0%到30% 3.333秒内显示第一张图片。30%到33%图片从0到-291px切换，花费0.333秒。以此类推。

图片3以后增加图片1的目的是让动画衔接自然。100%就是0%。

div是显示区域，ul是图片的移动区域。

 

代码：图片请自行添加。例子中是图片大小291px*571px

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            div{
                margin-left:0;
                width:291px;
                height:517px;
                overflow:hidden;
            }
            div>ul {
                width: 1164px;
                height: 517px;
                list-style: none;
                -webkit-animation: mymove 10s linear infinite;
            }
            
            div>ul>li {
                margin-top: 0;
                float: left;
            }
            
            div>ul:hover {
                animation-play-state: paused;
            }
            
            @-webkit-keyframes mymove {
                0% {
                    margin-left: 0;
                }
                30% {
                    margin-left: 0;
                }
                33% {
                    margin-left: -291px;
                }
                63% {
                    margin-left: -291px;
                }
                66% {
                    margin-left: -582px;
                }
                97% {
                    margin-left: -582px;
                }
                100% {
                    margin-left: -873px;
                }
            }
        </style>
    </head>

    <body>
        <div>
            <ul>
                <li><img src="img/01.png"></li>
                <li><img src="img/02.png"></li>
                <li><img src="img/03.png"></li>
                <li><img src="img/01.png"></li>
            </ul>
        </div>
    </body>

</html>

 疑问：如果图片张数不是固定的，代码该如何调整？

 

方案：

根据接口返回的数量，通过js动态添加样式

var style=document.styleSheets;
style[0].insertRule(`body{
      background:red
}`)
document.styleSheets返回的对象是一个 StyleSheetList。它是一个 StyleSheet 对象的有序集合。
insertRule() 方法在样式表中插入一条规则。
insertRule(rule,index)

index：可选，规定新规则插入的位置，默认值为0，也就是在样式表起始位置插入。

 

 

 

posted @ 2019-10-29 00:01  梁涛999  阅读(152)  评论(0)  编辑  收藏  举报