css轮播

转载 2017年10月13日 14:02:28

css部分

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}

.loop-image{
    width: 500px;
    height: 300px;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}

/* 创建loop动画规则 */
/*
   轮播5张,总耗时10s,单张应为2s(20%)
   单张切换动画耗时500ms,停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */

    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}

    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}

    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}

    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}

    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}
html部分

<div class="loop-wrap" style="margin-left: 10px;width: 500px;">
    <div class="loop-images-container">
        <img src="002.png" alt="" class="loop-image">
        <img src="003.png" alt="" class="loop-image">
        <img src="002.png" alt="" class="loop-image">
        <img src="001.png" alt="" class="loop-image">
        <img src="002.png" alt="" class="loop-image">
    </div>
</div>
src后面改成自己的图片。

HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告,简单好用,加上效果也很好看。 实现的效果: 5张图片每两秒轮播一次,右下角的数字随图片而变换,鼠标放在数字上图片停止,移走鼠标继续播放。 ...
  • as00v1
  • as00v1
  • 2016年08月05日 17:05
  • 5270

html5 css js轮播图动画

Sundy 日志day11 #div{ text-align: center; font-family: Cambria, Hoefler Text, Liberation Serif, T...

css3三维旋转轮播器简单例子

  • 2015年07月14日 10:38
  • 3KB
  • 下载

Jquery_css实现图片轮播小例子

效果:点击一下图片换一张图,可无限循环

js+css 轮播

  • 2014年04月20日 08:57
  • 8KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css轮播
举报原因:
原因补充:

(最多只允许输入30个字)