javascript写淡入淡出效果的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:590px;
            height: 470px;
            position: relative;
            border: 1px solid;
            margin: 100px auto;
        }
        #imgList{
            width: 590px;
            height: 470px;
            position: relative;
            list-style: none;
        }
        #imgList li{
            width: 590px;
            height: 470px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #num{
            width: 590px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #fdd;
            line-height: 50px;
        }
        #num i{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 10px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        #prve,#next{
            width: 45px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            cursor: pointer;
        }
        #next{
            right: 0;
        }
        #box .on{
            background-color:aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="imgList">
            <li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li>
            <li><a href="#"><img src="img/2.jpg"></a></li>
            <li><a href="#"><img src="img/3.jpg"></a></li>
            <li><a href="#"><img src="img/4.jpg"></a></li>
        </ul>
        <div id="num">
            <i class="on"></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div id="prve"><</div>
        <div id="next">></div>
    </div>
 
    <script src="js/tools.js"></script>
    <script>
        var imgs = $("li"),//所有的照片
            len = imgs.length,//照片的数量
            currentIndex = 0,//默认显示第一张
            nextIndex = 1,//下一张显示的照片
            nums = $("i");//所有的小圆点
        // 自动轮播
        var timer = setInterval(move,2000);
        // 鼠标移入自动轮播暂停
        $("#box").onmouseenter = function(){
            clearInterval(timer);
        }
        // 鼠标移出启动计时器进行自动轮播
        $("#box").onmouseleave = function(){
            timer = setInterval(move,2000);
        }
        // 定义图片运动的函数
        function move(){
            fadeOut(imgs[currentIndex],1000);
            fadeIn(imgs[nextIndex],1000);
            nums[currentIndex].className = "";
            nums[nextIndex].className = "on";
            currentIndex = nextIndex;
            nextIndex++;
            if(nextIndex === len)
                nextIndex = 0;
        }
        // 单击上一个和下一个的事件
        $("#prve").onclick = function(){
            nextIndex = currentIndex-1;
            if(nextIndex<0)
                nextIndex = len-1;
            move();
        }
        $("#next").onclick = move;
        // 鼠标放在小圆点上,图片切换到对应的图片上
        // 第一种 事件委派
        /* $("#num").onmouseover = function(e){
            var src = e.target;
            if(src.nodeName === "I"){
                var _index = Array.from(nums).indexOf(src);
                // console.log(_index);
                if(_index === currentIndex)
                    return;
                nextIndex = _index;
                move();    
            }
        } */
        // 第二种,遍历,i用let定义,为一个块级作用域,for循环会被分为单个的块级作用域,有自己独立的i的值
       /*  for(let i = 0 ;i<len;i++){
            nums[i].onmouseover = function(){
                var _index = i;
                if(_index === currentIndex)
                    return;
                nextIndex = _index;
                move();
            }
        } */
        // 第三种,也是遍历,在事件外循环类为nums对象加一个属性,用来存i的值
       /*  for(var i = 0 ;i<len;i++){
            nums[i].index = i;
            nums[i].onmouseover = function(){
                var _index = this.index;
                if(_index === currentIndex)
                    return;
                nextIndex = _index;
                move();
            }
        } */
        // 第四种,遍历,现将nums对象转换为一个数组,再用数组的indexOf方法获取当前dom元素在nums中的下标
        for(var i = 0 ;i<len;i++){
            nums[i].onmouseover = function(){
                var _index = Array.from(nums).indexOf(this);
                if(_index === currentIndex)
                    return;
                nextIndex = _index;
                move();
            }
        }
    </script>
</body>
</html>