令人无比烦恼的轮播图

从我上次帮别人用原生js写了一个轮播图之后我就想着一定要再次记录一下，从来没想到轮播图对我来说这么难，是真的难，我傻眼了，好不容易写出来一个改变透明度的，人家给我来了一句不大气，要大气上档次的，要左右切换的，心里一万句想骂人的话经过，我好难啊！我也只是一个刚入IT的新手啊。

HTML页面

<div class="banner">
            <ul class="slider">
                <img src="img/lbt1.jpg" alt="" />
                <img src="img/lbt2.jpg" alt="" />
                <img src="img/lbt3.jpg" alt="" />
                <!-- <img src="img/lbt1.jpg" alt="" /> -->
            </ul>
            <ul class="num">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="img left"><img src="./img/left.png" alt=""></div>
            <div class="img right"><img src="./img/right.png" alt=""></div>
        </div>

js页面

function $(str) {
    if (str.charAt(0) == "#") { // id
        return document.getElementById(str.substring(1));
    } else if (str.charAt(0) == ".") { // class
        return document.getElementsByClassName(str.substring(1));
    } else { // tagname
        return document.getElementsByTagName(str);
    }
}

function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var bStop = true; // 用来判断JSON中每个键是否到头了
        for (var attr in json) {
            //1、获取当前值
            let currentVal = parseFloat(getStyle(obj, attr));
            //  路程/时间表示的是一毫秒走多少像素
            let step = (json[attr] - currentVal) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //2、处理边界
            // 判断目标值不等于某个目标点
            if (currentVal != json[attr]) { // 说明肯定有一个么到
                bStop = false;
            }
            var temp = currentVal + step;
            //3、改变外观
            if (attr == "opacity") {
                obj.style.filter = 'alpha(opacity:' + temp + ')';
                obj.style.opacity = temp / 100;
            } else {
                obj.style[attr] = temp + "px";
            }
        }
        // 在遍历的外边执行
        if (bStop) {
            clearInterval(obj.timer);
            fn && fn(); //逻辑短路
        }
    }, 30)
}
//获取元素的CSS属性值
function getStyle(obj, attr) {
    if (obj.currentStyle) { //IE
        return obj.currentStyle[attr];
    } else { //Chrome 和 Firefox
        if (attr == "opacity") {
            return getComputedStyle(obj, false)[attr] * 100;
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}

function lbt(){
    var oSlider = $('.slider')[0];
    var aImg = oSlider.children;  //  所有图片 
    var oNum = $(".num")[0];
    var aLi = oNum.children;  // 所有数字下标
    var oLeft = document.querySelector('.left');  //  左右箭头
    var oRight = document.querySelector('.right');
    var inner = 0;   // 淡入下标
    var out = 0;  // 淡出下标
    var num = 0;
    var myTimer = null;  // 定时器
    // 右侧的箭头
    oRight.onclick = function(){
        inner++;
        if(inner >= aImg.length || inner == 0){
            inner = 0;
            out = aImg.length - 1;
        }else{
            out = inner - 1;
        }
        autoPlay(inner,out);
        tuBiao(inner);
    }
    // 左侧的箭头
    oLeft.onclick = function(){
        inner--;
        if(inner < 0){
            inner = aImg.length - 1;
        }else{
            out = inner + 1;
        }
        // console.log(inner,out);
        autoPlay(inner,out);
        tuBiao(inner);
    }
    // 点击数字图标
    for(var i = 0; i < aLi.length; i++){
        aLi[i].index = i;
        aLi[i].onclick = function(){
            inner = this.index;
            autoPlay(inner,num);
            tuBiao(inner);
        }
    }
    
    myTimer = setInterval(dong,3000);
    
    function dong(){
        inner++;
        if(inner >= aImg.length || inner == 0){
            inner = 0;
            out = aImg.length - 1;
        }else{
            out = inner - 1;
        }
        autoPlay(inner,out);
        tuBiao(inner);
    }
    
    function autoPlay(inner,out){
        startMove(aImg[inner], {opacity:100});
        startMove(aImg[out], {opacity:0});
        num = inner;   // 记录鼠标离开的图片的下标
    }
    
    // 鼠标悬停停止定时器
    $(".banner")[0].onmouseenter = function(){
        clearInterval(myTimer);
    }
    
    $(".banner")[0].onmouseleave = function(){
        myTimer = setInterval(dong,2000);
    }
    
    
    function tuBiao(inner){
        // 删除其他的li样式
        for(let j = 0; j < aLi.length; j++){
            if(aLi[j] == aLi[inner]){
                aLi[j].className = 'on';
            }else{
                aLi[j].className = '';
            }
        }
    }
}