纯CSS3图片轮播效果

所属分类：媒体-幻灯片和轮播图

87322 309 查看评论 (0)

分享到微信朋友圈

查看演示立即下载

插件描述：纯CSS制作的轮播效果，不用任何JS代码仅供新手参考。

代码说明

.zong{
    width:1164px;
    height:291px;
    -webkit-animation:change 10s linear infinite; //10s是整个动画的秒数 infinite是永久循环
}

滚动部分

@-webkit-keyframes change{
    0%{
        margin-left:0;
    }
    30%{
        margin-left:0; 
    }
    /*总共用10秒，0%到30% 也是3.333秒第一张图片停留位置后面以此类推*/
    33%{
        margin-left:-291px;
    }
    63%{
        margin-left:-291px;
    }
    66%{
        margin-left:-582px;
    }
    97%{
        margin-left:-582px;
    }
    100%{
        margin-left:-873px;
    }
}

jQuery滚动页面数字递加效果

jquery按钮点击波纹效果