纯CSS3图片轮播效果

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

 4357  15  查看评论 (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响应式3D旋转木马插件mk-3Dcarousel

mk-3Dcarousel是一款带图片倒影效果的响应式3D旋转木马jQuery插件
  幻灯片和轮播图
 4177  25

又一款幻灯片插件-FLEXSLIDER

又一款幻灯片插件-FLEXSLIDER
  幻灯片和轮播图
 16233  24

超棒的响应式幻灯jQuery插件 - refineslide

今天我们介绍的这个幻灯插件能够帮助我们使用响应式的方式展示图片幻灯,最重要的在于它支持很多超棒的CSS3幻灯过渡效果,能够帮助你创建超酷的幻灯效果。
  幻灯片和轮播图
 3604  52

简洁优雅,与众不同的轮播图插件

代码简洁优雅,与其他插件不同,包括各样式轮播图
  幻灯片和轮播图
 5130  63

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

取消回复