JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div id="box">
        <ul class="list">
            <li><img src="http://a4.qpic.cn/psb?/3e11d331-9da9-46fb-82d6-66cab5d80870/PB5BHInHG8qnAfXy*w7xjb4*9M.QwEsr5ZTd7uoR2uU!/m/dECy9WVrIgAA&bo=xAOAAkAGJwQBAAc!&rf=0-18"></li>
            <li><img src="http://a4.qpic.cn/psb?/3e11d331-9da9-46fb-82d6-66cab5d80870/PB5BHInHG8qnAfXy*w7xjb4*9M.QwEsr5ZTd7uoR2uU!/m/dECy9WVrIgAA&bo=xAOAAkAGJwQBAAc!&rf=0-18"></li>
            <li><img src="http://a4.qpic.cn/psb?/3e11d331-9da9-46fb-82d6-66cab5d80870/PB5BHInHG8qnAfXy*w7xjb4*9M.QwEsr5ZTd7uoR2uU!/m/dECy9WVrIgAA&bo=xAOAAkAGJwQBAAc!&rf=0-18"></li>
            <li><img src="http://a4.qpic.cn/psb?/3e11d331-9da9-46fb-82d6-66cab5d80870/PB5BHInHG8qnAfXy*w7xjb4*9M.QwEsr5ZTd7uoR2uU!/m/dECy9WVrIgAA&bo=xAOAAkAGJwQBAAc!&rf=0-18"></li>
            <li><img src="http://a4.qpic.cn/psb?/3e11d331-9da9-46fb-82d6-66cab5d80870/PB5BHInHG8qnAfXy*w7xjb4*9M.QwEsr5ZTd7uoR2uU!/m/dECy9WVrIgAA&bo=xAOAAkAGJwQBAAc!&rf=0-18"></li>
        </ul>
        <ul class="count">
            <li>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: none;}
        body {
            background: #ddd;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }
        #box {
            position: relative;
            width: 492px;
            height: 172px;
            margin: 10px auto;
            background: #fff;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: 8px solid #fff;
        }
        #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.urrent {
            opacity: 1;
            filter: alpha(opacity=100);
        }
        #box .count {
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .count li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            background-color: #f90;
            overflow: hidden;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            opacity: 0.7;
            filter: alpha(opacity=70;);
            color: #fff;
            cursor: pointer

        }
        .count li.current {
            color: #fff;
            opacity: 1;
            filter: alpha(opacity=100);
            font-weight: 700;
            background: #f60;
        }
        #temp {
            position: absolute;
            width: 100px;
            height: 100px;
            background: red;
        }

JavaScript

window.onload = function ()
{
    var oBox = document.getElementById("box");
    var aUl = document.getElementsByTagName("ul");
    var aImg = aUl[0].getElementsByTagName("li");
    var aNum = aUl[1].getElementsByTagName("li");
    var timer = play = null;
    var i = index = 0;

    //切换按钮
    for (i = 0; i < aNum.length; i++)
    {
        aNum[i].index = i;
        aNum[i].onmouseover = function ()
        {
            show(this.index)
        }
    }

    //鼠标划过关闭定时器
    oBox.onmouseover = function ()
    {
        clearInterval(play)
    };

    //鼠标离开启动自动播放
    oBox.onmouseout = function ()
    {
        autoPlay()
    };

    //自动播放函数
    function autoPlay ()
    {
        play = setInterval(function () {
            index++;
            index >= aImg.length && (index = 0);
            show(index);
        },2000);
    }
    autoPlay();//应用

    //图片切换, 淡入淡出效果
    function show (a)
    {
        index = a;
        var alpha = 0;
        for (i = 0; i < aNum.length; i++)aNum[i].className = "";
        aNum[index].className = "current";
        clearInterval(timer);

        for (i = 0; i < aImg.length; i++)
        {
            aImg[i].style.opacity = 0;
            aImg[i].style.filter = "alpha(opacity=0)";
        }

        timer = setInterval(function () {
            alpha += 2;
            alpha > 100 && (alpha =100);
            aImg[index].style.opacity = alpha / 100;
            aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
            alpha == 100 && clearInterval(timer)
        },20);
    }
};