• 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,也就是在样式表起始位置插入。

  • 相关阅读:
    正则表达式() [] {}区别
    JAVA int自动装箱
    Intellij Idea debug 远程部署的的tomcat项目
    TensorFlow MNIST CNN 代码
    线性代数-01-向量究竟是什么
    线性代数-线性代数的本质
    TensorFlow MNIST 入门 代码
    TensorFlow 学习可视化 TensorBoard 简易教程
    TensorFlow 函数
    TensorFlow Demo2
  • 原文地址:https://www.cnblogs.com/liangtao999/p/11756440.html
Copyright © 2020-2023  润新知