JSFiddle - React, Tailwind, and code Playground

by niuuin

HTML

<div class="container">
  <div id="box">
    <a href="#" class="item">
                <img src="https://dummyimage.com/1600x800/ff4040/ffffff?text=A" alt="">
            </a>
    <a href="#" class="item">
                <img src="https://dummyimage.com/1600x800/3048ff/ffffff?text=B" alt="">
            </a>
    <a href="#" class="item">
                <img src="https://dummyimage.com/1600x800/ff820d/ffffff?text=C" alt="">
            </a>
  </div>
</div>

CSS

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

.container {
    width: 800px;
    margin: 0 auto;
}

#box {
    position: relative;
    overflow: hidden;
    width: 800px;
    height: 400px;
}

.item {
    position: absolute;
    transition: all 1s;
    display: block;
    width: 100%;
    opacity: 0;
}

JavaScript

; (function () {
    'use strict';

    const parent = document.getElementById('box');
    const slides = parent.querySelectorAll('.item');

    let current = 0;


    boot();
    function boot() {
        show(slides[current]);
        setInterval(() => {
            increment();
            loop();
        }, 1000)
    }

    function loop() {
        let prev = getPrev();
        let next = getNext();

        hide(prev);
        show(next);
    }

    /**
     * 增量
     * 
     */
    function increment() {
        current++;
        if (current >= slides.length)
            current = 0;
    }

    
    /**
     * 如果 
     *
     * @returns
     */
    function getPrev() {
        if (current === 0)
            return slides[slides.length - 1];
        return slides[current - 1];
    }

    function getNext() {
        if (current < slides.length)
            return slides[current];
        return slides[0];
    }

    function hide(el) {
        if (!el)
            return;
        el.style.opacity = 0;
    }

    function show(el) {
        if (!el)
            return;
        el.style.opacity = 1;
    }




})();