纯CSS3图片轮播效果

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

纯CSS3图片轮播效果 ie兼容10

代码说明

.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幻灯片-RHINOSLIDER

Rhinoslider号称是最灵活得 Jquery 幻灯片插件,Rhinoslider不但可以将所有的效果用在图片上,还可以用在各种类型的Html标签元素上。 我们不仅可以使用官方的一系列效果,而且还可以添加我们自己的样式效果。
  幻灯片和轮播图
 6646  7

图片标题轮播

幻灯片插件,它非常小巧,压缩后仅 1.34KB,功能也不算丰富,圆点控制、自动播放。
  幻灯片和轮播图
 9120  85

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 8271  51

jquery仿酷狗官网新闻焦点图

jquery仿酷狗官网新闻焦点图,jquery扩展方法,自动切换,可控制时间,简单易改,效果很炫,适合首页展示,兼容各大浏览器
  幻灯片和轮播图
 6279  67

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复
    PROMULGATOR

    等不到の昨天

    湖南省长沙市