点滴珍藏|快乐分享
当前位置: 建站编程 > 纯 CSS 实现响应式自动轮播图

纯 CSS 实现响应式自动轮播图

2017-05-29 分类:建站编程 作者:西狂 阅读(8)

闲来无事,按照网上类似的教程折腾了一个纯 CSS 的轮播图,体验了一下 CSS3 强大的动画功能。之前试了几个方法,但都不能配合博客主题实现响应式缩放就放弃了,这个方法巧妙地将图片作为列表的背景图片,实现了响应式以及自动轮播的目的。

一、布局

 <section class="slider-contaner">
            <ul class="slider">
                <li class="slider-item slider-item1"></li>
                <li class="slider-item slider-item2"></li>
                <li class="slider-item slider-item3"></li>
                <li class="slider-item slider-item4"></li>
                <li class="slider-item slider-item5"></li>
                <li class="slider-item slider-item6"></li>
            </ul>
            <div class="focus-container">
                <ul class="floatfix">
                    <li><div class="focus-item focus-item1"></div></li>
                    <li><div class="focus-item focus-item2"></div></li>
                    <li><div class="focus-item focus-item3"></div></li>
                    <li><div class="focus-item focus-item4"></div></li>
                    <li><div class="focus-item focus-item5"></div></li>
                    <li><div class="focus-item focus-item6"></div></li>
                </ul>
            </div>
        </section>

二、CSS 及动画

/*slider start*/
.slider-contaner {
    width: 100%;
    position: relative;
}
.slider-item + .slider-item {
    opacity: 0;
    border-radius: 6px;
}
.slider-item {
    width: 100%;
    position: absolute;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
    background-size: 100%;
}
.focus-container {
    position: absolute;
    z-index: 2;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.focus-container li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    background: #fff;
}
.focus-item {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation-timing-function: linear;
    animation-name: fade;
    animation-iteration-count: infinite;
}
.focus-item2, .focus-item3, .focus-item4, .focus-item5, .focus-item6 {
    opacity: 0;
}
.focus-container ul {
    margin-left: 46%;
}

/*设置轮播焦点的位置*/
.focus-container {
    bottom: 5%;
}

/*设置当前图片焦点的颜色*/
.focus-item {
    background: #51B1D9;
}

/*设置动画,请根据实际需要修改秒数,第一幅图不需要淡入的效果,可以设置-1秒跳过*/
.slider-item, .focus-item {
    animation-duration: 24s;
}
.slider-item1, .focus-item1 {
    animation-delay: -1s;
}
.slider-item2, .focus-item2 {
    animation-delay: 3s;
}
.slider-item3, .focus-item3 {
    animation-delay: 7s;
}
.slider-item4, .focus-item4 {
    animation-delay: 11s;
}
.slider-item5, .focus-item5 {
    animation-delay: 15s;
}
.slider-item6, .focus-item6 {
    animation-delay: 19s;
}
/*设置动画关键帧,动画共计24秒,6附图每幅停留3秒(12.5%),淡出1秒(4.57%)*/
@keyframes fade {
    0% {
        opacity: 0;
        z-index: 2;
    }
    4.57% {
        opacity: 1;
        z-index: 1;
    }
    17.07% {
        opacity: 1;
        z-index: 1;
    }
    21.63% {
        opacity: 0;
        z-index: 0;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}

/*设置背景,响应式请利用媒体查询根据断点修改路径*/
.slider-item1 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/1.jpeg?imageslim);
    background-repeat: no-repeat;
}
.slider-item2 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/2.jpeg?imageslim);
    background-repeat: no-repeat;
}
.slider-item3 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/3.jpeg?imageslim);
    background-repeat: no-repeat;
}
.slider-item4 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/4.jpeg?imageslim);
    background-repeat: no-repeat;
}
.slider-item5 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/5.jpeg?imageslim);
    background-repeat: no-repeat;
}
.slider-item6 {
    background-image: url(https://www.xikuang.ren/zy/img/cat/6.jpeg?imageslim);
    background-repeat: no-repeat;
}
/*设置图片的高度,请根据具体需要修改百分比(图片高/宽的百分比值),响应式及时修改此值*/
.slider, .slider-item {
    padding-bottom: 39.47%;
}

三、总结

不可置疑的是 CSS3 动画的出现在一定程度上降低了动画效果的实现难度,利于前端的学习,其精简的代码量把我们从烦人的 JS 调试中解放出来,但是相比 JS 它还是有一定的局限性的。

  • 由于 CSS 功能的限制,轮播图只能在自动轮播与点击轮换两个功能选其一实现;
  • CSS3 部分属性不能完全兼容各大浏览器,特别是IE6、7、8所兼容。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 纯 CSS 实现响应式自动轮播图

博客简介

欢迎来到西狂部落阁

精彩评论