JSFiddle - React, Tailwind, and code Playground

by crab1127

HTML

<div id="box">

    <ul class="list">

        <li class="current"><img src="http://fgm.cc/learn/lesson4/img/01.jpg" width="490" height="170" /></li>

        <li><img src="http://fgm.cc/learn/lesson4/img/02.jpg" width="490" height="170" /></li>

        <li><img src="http://fgm.cc/learn/lesson4/img/03.jpg" width="490" height="170" /></li>

        <li><img src="http://fgm.cc/learn/lesson4/img/04.jpg" width="490" height="170" /></li>

        <li><img src="http://fgm.cc/learn/lesson4/img/05.jpg" width="490" height="170" /></li>

    </ul>

    <ul class="count">

        <li class="current">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</div>

CSS

body,div,ul,li{margin:0;padding:0;}

ul{list-style-type:none;}

body{background:#000;text-align:center;font:12px/20px Arial;}

#box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}

#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}

#box .list li{position:absolute;top:0;left:0;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}

#box .list li.current{opacity:1;filter:alpha(opacity=100);}

#box .count{position:absolute;right:0;bottom:5px;}

#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}

#tmp{width:100px;height:100px;background:red;position:absolute;}

JavaScript

var oBox = document.getElementById('box');
var oUl = oBox.getElementsByTagName('ul');
var pic = oUl[0].getElementsByTagName('li');
var num = oUl[1].getElementsByTagName('li');
var i = 0,
    index = 0;
var timer = null,
    play = null;

function autoPlay() {
    play = setInterval(function() {
        index++;
        index >= pic.length && (index = 0);
        show(index);
    }, 2000)
}

function show(a) {
    index = a;
    var alpha = 0;
    for (i = 0; i < num.length; i++) num[i].className = '';
    num[index].className = 'current';
    clearInterval(timer);
    for (i = 0; i < pic.length; i++) {
        pic[i].style.opacity = 0;
        pic[i].style.opacity = "alpha(opacity =0)";
    }
    timer = setInterval(function() {
        alpha += 2;
        alpha > 100 && (alpha = 100);
        pic[index].style.opacity = alpha / 100;
        pic[index].style.filter = 'alpha(apacity = ' + alpha + ')';
        alpha == 100 && clearInterval(timer);
    }, 20)
}
autoPlay();
for (i = 0; i < num.length; i++) {
    num[i].index = i;
    num[i].onmouseover = function() {
        show(this.index)
    }
}
oBox.onmouseover = function() {
    clearInterval(play)
}
oBox.onmouseout = function() {
    autoPlay();
}