纯CSS3图片轮播效果

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

 85763  309  查看评论 (0)
分享到微信朋友圈
X
纯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超炫3D自动旋转点击图片轮播图片切换焦点图

jquery超炫3D自动旋转点击图片轮播图片切换焦点图
  幻灯片和轮播图
 87744  605

jQuery响应式全屏轮播插件royalslider.js

全屏轮播插件可放大缩小,支持触控,移动端使用,本插件为收费插件,特意整理出来的
  幻灯片和轮播图
 50593  373

html5全屏大图幻灯片切换特效按钮特效

html5全屏大图幻灯片切换特效按钮特效
  幻灯片和轮播图
 40593  373

jQuery滑动式图片轮播效果

jQuery滑动式图片轮播效果兼容ie6
  幻灯片和轮播图
 39218  311

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复