• CSS3 实现简单轮播图


    用css3动画实现图片切换效果,原理还是改变left值。只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换。

    html结构

    <div id="container">
            <ul class="pic">
                <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li>
                <li><a href="javascript:;"><img src="images/DSC01628.jpg" alt="pic2"></a></li>
                <li><a href="javascript:;"><img src="images/DSC02637.jpg" alt="pic3"></a></li>
                <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li><!-- 克隆第一张 -->
            </ul>
            
        </div>

    css样式

         *{ 
                 margin: 0;
                 padding: 0; 
                 text-decoration: none;
             }
            ul{
                list-style: none;
            }
            
            #container{
                position: relative;
                width: 400px;
                height: 200px;
                overflow: hidden;/*隐藏溢出的图片*/
            }
            .pic{
                width:1600px;/*4张图的宽度*/
                position: absolute;/*基于父容器进行定位*/
                left:0;
                animation-name: focusmap;
                animation-duration: 12s;
                animation-iteration-count: infinite;//动画调用可以简写
    
            }
             @keyframes focusmap {
                0%,30%{
                    left: 0;
                }
                35%,65%{
                    left: -400px;
                }
                70%,99%{
                    left: -800px;
                }
                100%{
                    left: -1200px;
                }
               
            }
            .pic li{
                float: left;
                background: #5dd94e;
            }
    
            .pic li img {
                width: 400px;
                height: 200px;
            }
  • 相关阅读:
    jquery城市选择案例
    jquery点击回到页面顶部方法
    jquery动态创建表格
    myeclipse、eclipse中项目复制后(可能无法访问)注意事项 .
    Myeclipse如何整合tomcat
    Java学习路线图
    ftp
    用javascript实现简体和繁体字间的转换
    FTP远程命令集
    JDBC-ODBC桥乱码问题解决方案
  • 原文地址:https://www.cnblogs.com/czzaiba/p/5732390.html
Copyright © 2020-2023  润新知