JSFiddle - React, Tailwind, and code Playground

by Shang WenLong

HTML

<div class="carousel">
    <ol class="indicator"><!-- 这是下面那个指示 -->
        <li class="active" data-slider-to="0"></li>
        <li class="" data-slider-to="1"></li>
        <li class="" data-slider-to="2"></li>
    </ol>
    <div class="item-wrap"><!-- 这是你放内容的容器 -->
        <div class="item active">
            <div class="dummy-image-1">我是内容1</div><!-- 我没图片，就用div和背景颜色代替 -->
        </div>
        <div class="item">
            <div class="dummy-image-2">我是内容2</div>
        </div>
        <div class="item">
            <div class="dummy-image-3">我是内容3</div>
        </div>
    </div>
    <!--  这里你可以放2个箭头按钮，不知道怎么做的话再问我 -->
</div>

CSS

.carousel{
    border:1px solid #000;
    width:500px;
    height:200px;
    position:relative;
}
.carousel .indicator{
    margin:0;
    padding:0;
    position:absolute;
    bottom:20px;
    left:20px;
    list-style:none;
    z-index:2;
}
.carousel .indicator > li{
    display:inline-block;
    width: 10px;
    height: 10px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
}
.carousel .indicator > li.active{
    background-color: #000;
    border: 1px solid red;
}
.carousel .item-wrap{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}
.carousel .item-wrap .item{
    position: absolute;
    left:100%;
    width:100%;
    height:100%;
}
.carousel .item-wrap .item.active{
    left:0;
}
.dummy-image-1{
    width:100%;
    height:100%;
    background:red;
}
.dummy-image-2{
    width:100%;
    height:100%;
    background:green;
}
.dummy-image-3{
    width:100%;
    height:100%;
    background:blue;
}

JavaScript

//这里我就简单写写，你可以写成封装成控件等等
function toArray(nodeList){
    return Array.prototype.slice.call(nodeList,0);
}
function addClass(dom,className){
    var classArray = dom.className.split(' ');
    if (classArray.indexOf(className) > -1){
        return;
    }
    classArray.push(className);
    dom.className = classArray.join(' ');
}
function removeClass(dom,className){
    var classArray = dom.className.split(' '),
        index = classArray.indexOf(className)
    if (index < 0){
        return;
    }
    classArray.splice(index,1);
    dom.className = classArray.join(' ');
}
var fps = 60;
var step = 1/fps;
var container = document.querySelector('.carousel');
var itemWrap = container.querySelector('.item-wrap');
var items = itemWrap.querySelectorAll('.item');
items = toArray(items);
var indicator = container.querySelector('.indicator');

var isAnimation = false;
function slideLeftIn(dom,duration){
    var start = 100;
    var scale = step/duration;
    isAnimation = true;
    (function loop(){
        if(Math.abs(start) < scale){
            dom.style.left = 0;
            isAnimation = false;
            console.log('end1');
            return;
        }
        setTimeout(function(){
            start-=scale*100;
            dom.style.left = start+"%";
            loop();
        },step*1000);
    })();
}
function slideLeftOut(dom,duration){
    var end = 0;
    var scale = step/duration;
    
    (function loop(){
        if(Math.abs(end) >100+scale){
            dom.style.left = "-100%";
            console.log('end2');
            return;
        }
        setTimeout(function(){
            end+=scale*100;
            dom.style.left = -end+"%";
            loop();
        },step*1000);
    })();
}
indicator.addEventListener('click',function(e){
    var target = e.target,slideTo = 0,
        activedIndicator = null,
        activedItem = 0;
    if(isAnimation){
        return;
    }
    if(target.tagName.toLowerCase()==='li'){
        activedIndicator =...