两种纯CSS轮播图

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

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

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

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

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

html结构如下:

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

样式代码如下：

//自动轮播，鼠标悬停停止轮播
.slide {
    $width: 500px;
    $item-len: 3;
    $duration: 2s;
    
    --width: $width;
    --item-len: $item-len;
    --duration: $duration;

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

    &-list {
        display: flex;
        
        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)));
        }
    }
}

交互式的轮播, 点击切换

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

• 兄弟选择器
• 伪类选择器
• transition动画

html结构如下:

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

样式代码如下：

//交互式轮播，点击切换
.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~