怎样用CSS写轮播图结果？-百分百源码网

怎样用CSS写轮播图结果？

发布时间：09/01 来源：未知浏览：关键词：

信赖许多小伙伴做过的项目里面都有轮播图这么一个需求，有的小伙伴大概会本人造轮子，有的小伙伴大概会直接Google轮播图插件

但是假如不使用javascript，能不克不及实现轮播图的结果呢？大概小伙伴们并没有思考过这个问题，那么下面我们就一起来用css实现一个简易的轮播图

根本需求剖析

由于css没法做到js一样的精准操控，所有某些结果是没法实现的，比方在轮播的同时支撑会员摆布滑动，所以使用css智能实现根本的结果。下面列出来的内容就是我们实现的：

1、在牢固区域中，内部内容自行滑动切换构成播放的结果

2、当切换到最后一张内容时，会反向播放或者回到起点重播

3、每张内容会逗留一段时间，让会员能够看分明

4、内容可以点击/停止操纵

dom构造搭建

第一要有一个容器作为轮播图的容器，同时由于要实现滑动切换，所之内部需要有一个装载所有待切换内容的子容器

假如子容器中的内容是摆布切换的，则需要将内容摆布摆列开

下面以轮播图片为例，上代码

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
        <img src="whiteland.jpg" alt="" class="loop-image">
        <img src="darksky.jpg" alt="" class="loop-image">
        <img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap 是主容器

.loop-images-container 是承载内部图片的子容器

.loop-image 是图片内容，假如需要显示其他内容，可以自定义

css实现静态结果

轮播图内每一页内容的宽高应当雷同，且等于主容器.loop-wrap宽高

.loop-images-container的宽高必定有一个大于外部主容器，overflow属性应当设定为hidden。那为什么不设定为auto呢？我不告诉你，你可以本人试试看???

.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;
}

下面在阅读器中翻开页面，就可以看到不带轮播结果的静态页面了，除了第一张图片，其他图片都不成见

css实现轮播结果

轮播结果说到底就是一个动画结果，而通过css3的新属性 animation 我们就可以自定义一个动画来到达轮播图结果。下面先来理解一下 animation 这个属性

/*
animation: name duration timing-function delay iteration-count direction
name: 动画名
duration： 动画连续时间 设定为0则不施行
timing-function：动画速度曲线
delay：动画延迟开端时间 设定为0则不延迟
iteration-count：动画轮回次数 设定为infinite则无穷次轮回
direction：可否应当轮番反向播放动画 normal 否 alternate 是
*/

animation 的 name 值是动画名，动画名可以通过 @keyframes 创立自定义动画规则

剖析动画

要实现轮播，本质上是使内部承载内容的子容器 .loop-images-container 停止位移，从而使不一样位置的内容一次展现在会员面前

共有五张图片需要展现，假如轮播总耗时10s，那么每张图片应当有2s的时间(20%)，而每张图片耗时的构成是切换耗时+展现耗时，假如切换耗时500ms(5%)，展现耗时就应当是1500ms(15%)

于是这样革新css

.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);} /* 复位到第一张图片 */
}

当当当当~~~纯css实现轮播图结果完成

想要直接看结果的小伙伴可以猛戳下面的链接

纯css实现轮播图结果

这是一个标的目的的轮播结果，想要实现往返标的目的的轮播结果，小伙伴们可以试试direction的alternate，但是自定义动画规则的时间间隔也要从新运算了哦！

引荐教程：《CSS教程》

以上就是怎样用CSS写轮播图结果？的具体内容，更多请关注百分百源码网其它相关文章！

打赏