两种纯CSS轮播图

忙碌的618过后，抽点时间回顾最近这段时间CSS选择器和CSS动画的应用学习试了试用纯CSS来实现轮播图效果。

自动轮播，鼠标悬停停止轮播

首先实现的轮播图效果：自动轮播以及鼠标放上去后停止轮播。主要使用CSS animation，关键技术点：

• animation-timing-function: steps()
• animation-play-state: running | paused

自动轮播实现有多种方式，这里使用steps()动画函数实现轮播图一帧一帧的切换。

html结构如下:

<div class="slide">
    <ul class="slide-list">
        <li class="slide-item">
            <img src="https://img10.360buyimg.com/da/jfs/t6250/293/993486607/87329/62865577/5948c227N3fdb48b7.jpg" alt="第一帧">
        </li>
        <li class="slide-item">
            <img src="https://m.360buyimg.com/babel/jfs/t6367/156/1030373778/71783/2b7eee3a/5948bcc8Ndcb1661f.jpg" alt="第二帧">
        </li>
        <li class="slide-item">
            <img src="https://img11.360buyimg.com/da/jfs/t5464/106/472798610/142359/66551a05/58ffffc8Naea1f2a2.jpg" alt="第三帧">
        </li>
    </ul>
</div>

一个轮播容器和轮播列表。

样式代码如下：

//自动轮播，鼠标悬停停止轮播
.slide {
    $width: 500px;
    $item-len: 3;
    $duration: 2s;
    <!--CSS变量（试试^_^）-->
    --width: $width;
    --item-len: $item-len;
    --duration: $duration;

    position: relative;
    width: $width;
    width: var(--width);
    overflow: hidden;

    &-list {
        display: flex;
        <!--steps动画函数-->
        animation: aniSlide ($item-len * $duration) steps($item-len) infinite;
        animation: aniSlide calc(var(--item-len) * var(--duration)) steps(var(--item-len)) 0s infinite;
        animation-play-state: running;
        
        <!--鼠标悬停，停止轮播-->
        &:hover {
            animation-play-state: paused;
        }
    }

    &-item {
        flex: 0 0 100%;

        img {
            max-width: 100%;
        }
    }


    @keyframes aniSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(0 - ($item-len * $width));
            transform: translateX(calc(-100% * var(--item-len)));
        }
    }
}

交互式的轮播, 点击切换

这个轮播的关键点在于交互的实现，如何点击切换轮播图。关键技术点：

• <label for="XXX">
• 兄弟选择器
• 伪类选择器
• transition动画

html结构如下:

<div class="slide2">
    <!--导航圆点-->
    <input type="radio" id="slide2-index1" checked name="slide2-index" />
    <label class="slide2-label" for="slide2-index1"></label>

    <input type="radio" id="slide2-index2" name="slide2-index" />
    <label class="slide2-label" for="slide2-index2"></label>

    <input type="radio" id="slide2-index3" name="slide2-index" />
    <label class="slide2-label" for="slide2-index3"></label>

    <!--前后箭头-->
    <div class="slide2-triggerGroup">
        <label class="slide2-next" for="slide2-index2"></label>
    </div>
    <div class="slide2-triggerGroup">
        <label class="slide2-prev" for="slide2-index1"></label>
        <label class="slide2-next" for="slide2-index3"></label>
    </div>
    <div class="slide2-triggerGroup">
        <label class="slide2-prev" for="slide2-index2"></label>
    </div>

    <ul class="slide2-list">
        <li class="slide2-item">
            <img src="https://img10.360buyimg.com/da/jfs/t6250/293/993486607/87329/62865577/5948c227N3fdb48b7.jpg" alt="第一帧">
        </li>
        <li class="slide2-item">
            <img src="https://m.360buyimg.com/babel/jfs/t6367/156/1030373778/71783/2b7eee3a/5948bcc8Ndcb1661f.jpg" alt="第二帧">
        </li>
        <li class="slide2-item">
            <img src="https://img11.360buyimg.com/da/jfs/t5464/106/472798610/142359/66551a05/58ffffc8Naea1f2a2.jpg" alt="第三帧">
        </li>
    </ul>
</div>

除了轮播容器和列表外增加了交互的导航圆点元素和前后切换的箭头。

样式代码如下：

//交互式轮播，点击切换
.slide2 {
    $width: 500px;
    $item-len: 3;
    $nav-color: #aaa;
    $nav-color-active: red;
    $duration: 0.5s;

    position: relative;
    width: $width;
    overflow: hidden;
    background-color: #000;

    &-list {
        width: $width;
        display: flex;
        align-items: flex-start;
        transition: transform $duration;
    }

    &-item {
        position: relative;
        z-index: 1;
        flex: 0 0 100%;

        img {
            display: block;
            max-width: 100%;
        }
    }

    .slide2-label {
        position: absolute;
        bottom: 20px;
        z-index: 9;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: $nav-color;
        
        @for $index in $item-len {
            <!--伪类选择器    -->
            &:nth-of-type(#{$index}) {
                right: (20px + 10px) * ($item-len - $index + 1);
            }
        }
    }

    input {
        position: absolute;
        top: 10px;
        z-index: 0;
        visibility: hidden;
        
        @for $index in $item-len {
            &:nth-of-type(#{$index}) {
                <!--~兄弟选择器-->
                &:checked ~ ul {
                    transform: translateX(0 - ($index - 1) * $width);
                }
                &:checked ~ .slide2-triggerGroup {
                    &:nth-of-type(#{$index}) {
                        display: block;
                    }
                }
            }
        }

        &:checked + label {
            background-color: $nav-color-active;
        }
    }

    &-triggerGroup {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9;
        width: 100%;
        height: 50px;
        display: none;

        label {
            position: absolute;
            top: 0;
            width: 50px;
            height: 50px;
            transition: background 0.2s;
            background-color: rgba(0, 0, 0, 0.2);

            &:hover {
                background-color: rgba(0, 0, 0, 0.5);
            }

            &:after {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                content: ' ';
                border-style: solid;
                border-width: 10px;
                width: 0;
                height: 0;
            }

            &.slide2-prev {
                left: 0;
                &:after {
                    transform: translate(10px, -50%);
                    border-color: transparent #fff transparent transparent;
                }
            }
            &.slide2-next {
                right: 0;
                &:after {
                    transform: translate(20px, -50%);
                    border-color: transparent transparent transparent #fff;
                }
            }
        }
    }
}

demo点击这里，是不是很简单O(∩_∩)O~