纯CSS3图片轮播效果

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

 7167  18  查看评论 (0)
纯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 banner 轮播

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。
  幻灯片和轮播图
 198735  80

jQuery和css3简单实用的背景幻灯片插件

这是一款非常简洁和实用的jQuery和css3 幻灯片插件。
  幻灯片和轮播图
 9986  37

仿英雄杀游戏官网幻灯片JS代码

仿英雄杀游戏官网幻灯片JS代码
  幻灯片和轮播图
 12020  128

焦点图插件myFocus Demo v2.0.1

使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二
  幻灯片和轮播图
 7548  52

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

取消回复