好看的轮播切换效果

微博上看到@过气网红一丝 发的，特地收集。

---

预览

---

html

<div class="slides">
    <div class="slide 1th"></div>
    <div class="slide 2th"></div>
    <div class="slide 3th"></div>
    <div class="slide 4th"></div>
    <div class="slide 5th"></div>
</div>
<div class="nav">
    <div class="btn-group">
        <div class="btn active"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
    </div>
</div>

---

css

 .btn-group {
        position: relative;
        display: inline-block;
    }
    .btn-group .btn {
        cursor: pointer;
        float: left;
        height: 10px;
         10px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.3);
        margin-left: 6px;
        margin-top: 1px;
    }
    .btn-group .btn:first-child {
        margin-left: 3px;
    }
    .btn-group svg {
        z-index: -1;
        top: 0;
        left: 0;
        position: absolute;
         100%;
        height: 100%;
        overflow: visible;
    }
    .btn-group path {
        fill: none;
        stroke: #eee;
        stroke-dasharray: 39, 99999;
        transition: all 1s ease-in-out;
        stroke- 2;
    }
    .slides {
        transition: left 1s ease-in-out;
        height: 100vh;
        position: absolute;
    }
    .slides .slide {
        height: 100vh;
         100vw;
        float: left;
    }
    .slides .slide:nth-child(1) {
        background: #c66;
    }
    .slides .slide:nth-child(2) {
        background: #acac39;
    }
    .slides .slide:nth-child(3) {
        background: #39ac39;
    }
    .slides .slide:nth-child(4) {
        background: #40bfbf;
    }
    .slides .slide:nth-child(5) {
        background: #8c8cd9;
    }
    body {
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .nav {
        text-align: center;
        position: absolute;
         100%;
        bottom: 5%;
        transform: translateY(-50%);
    }

---

js

  const pathLength = 39;
    const BtnGroup = class BtnGroup {
        constructor(group) {
            this.buttonSpacing = 20;
            this.group = group;
            this.buttons = Array.prototype.slice.call(this.group.querySelectorAll('.btn'));
            this.slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
            this.slideContainer = document.querySelector('.slides');
            this.slideContainer.style.width = this.slides.length + '00vw';
            this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            this.svg.setAttribute('viewbox', '0 0 ' + (this.buttonSpacing * this.buttons.length) + ' 16');
            this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            this.path.classList.add('line');
            this.currentPath = 'M ' + (-this.buttonSpacing / 2) + ', 14';
            this.currentIndex = -1;
            this.activateIndex(this.buttons.indexOf(this.group.querySelector('.active')));
            this.group.appendChild(this.svg);
            this.svg.appendChild(this.path);
            this.refreshPath();
            this.initButtons();

            for (const button of this.buttons) {
                button.addEventListener('click', e => this.onClick(e));
            }
        }

        initButtons() {
            for (var i = 0; i < this.buttons.length; i++) {
                const center = this.center(i);
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                let pathStr = '';
                pathStr += 'M' + (center    ) + ', 14 ';
                pathStr += 'C' + (center + 3) + ', 14 ';
                pathStr +=       (center + 6) + ', 11 ';
                pathStr +=       (center + 6) + ',  8 ';
                pathStr += 'C' + (center + 6) + ',  5 ';
                pathStr +=       (center + 3) + ',  2 ';
                pathStr +=       (center    ) + ',  2 ';
                pathStr += 'C' + (center - 3) + ',  2 ';
                pathStr +=       (center - 6) + ',  5 ';
                pathStr +=       (center - 6) + ',  8 ';
                pathStr += 'C' + (center - 6) + ', 11 ';
                pathStr +=       (center - 3) + ', 14 ';
                pathStr +=       (center    ) + ', 14 ';
                path.setAttributeNS(null, 'd', pathStr);
                path.classList.add('circle');
            }
        }

        onClick(e) {
            const index = this.buttons.indexOf(e.srcElement || e.target);
            this.activateIndex(index);
        }

        refreshPath() {
            this.path.setAttributeNS(null, 'd', this.currentPath);
            this.path.style.strokeDashoffset = (-this.path.getTotalLength() + pathLength) * 0.9965;
        }

        center(index) {
            return index * this.buttonSpacing + (this.buttonSpacing / 2);
        }

        removeClass(str) {
            if (this.buttons[this.currentIndex]) {
                this.buttons[this.currentIndex].classList.remove(str);
            }
        }

        addClass(str) {
            if (this.buttons[this.currentIndex]) {
                this.buttons[this.currentIndex].classList.add(str);
            }
        }

        activateIndex(index) {
            this.slideContainer.style.left = -index + '00vw';
            const lastCenter = this.center(this.currentIndex);
            const nextCenter = this.center(index);
            const offset = 0;
            const sign = index < this.currentIndex ? -1 : 1;
            this.currentPath += 'C' + (lastCenter + sign * 3) + ', 14 ';
            this.currentPath +=       (lastCenter + sign * 6) + ', 11 ';
            this.currentPath +=       (lastCenter + sign * 6) + ',  8 ';
            this.currentPath += 'C' + (lastCenter + sign * 6) + ',  5 ';
            this.currentPath +=       (lastCenter + sign * 3) + ',  2 ';
            this.currentPath +=       (lastCenter           ) + ',  2 ';
            this.currentPath += 'C' + (lastCenter - sign * 3) + ',  2 ';
            this.currentPath +=       (lastCenter - sign * 6) + ',  5 ';
            this.currentPath +=       (lastCenter - sign * 6) + ',  8 ';
            this.currentPath += 'C' + (lastCenter - sign * 6) + ', 11 ';
            this.currentPath +=       (lastCenter - sign * 3) + ', 14 ';
            this.currentPath +=       (lastCenter           ) + ', 14 ';
            this.currentPath += 'L' + (nextCenter           ) + ', 14 ';
            this.currentPath += 'C' + (nextCenter + sign * 3) + ', 14 ';
            this.currentPath +=       (nextCenter + sign * 6) + ', 11 ';
            this.currentPath +=       (nextCenter + sign * 6) + ',  8 ';
            this.currentPath += 'C' + (nextCenter + sign * 6) + ',  5 ';
            this.currentPath +=       (nextCenter + sign * 3) + ',  2 ';
            this.currentPath +=       (nextCenter           ) + ',  2 ';
            this.currentPath += 'C' + (nextCenter - sign * 3) + ',  2 ';
            this.currentPath +=       (nextCenter - sign * 6) + ',  5 ';
            this.currentPath +=       (nextCenter - sign * 6) + ',  8 ';
            this.currentPath += 'C' + (nextCenter - sign * 6) + ', 11 ';
            this.currentPath +=       (nextCenter - sign * 3) + ', 14 ';
            this.currentPath +=       (nextCenter           ) + ', 14 ';
            this.removeClass('active');
            this.currentIndex = index;
            this.addClass('active');
            this.refreshPath();
        }
    }

    const groups = Array.prototype.slice.call(document.querySelectorAll('.btn-group'));

    for (const group of groups) {
        console.log(new BtnGroup(group));
    }