js 利用透明度 通过构造函数与原型对象来实现轮播图

这里为页面结构

<div class="slidBox">
        <ul class="slidUl">
            <li><img src="img/1.jpg" alt="">1</li>
            <li style="opacity: 0;"><img src="img/2.jpg" alt="">2</li>
            <li style="opacity: 0;"><img src="img/3.jpg" alt="">3</li>
        </ul>
    </div>
    <!-- 这个是封装好的运动函数 和 获取非行内样式的函数  的js -->
    <script src="sport-color-count.js"></script>
    <!--  这个是轮播类的js  -->
    <script src="case.js"></script>
    <script>
        window.onload = function () {
            var opacity1 = new Opacity();
            opacity1.action();
            opacity1.arrow();
            opacity1.nut();
            opacity1.clearInterval();
        }
    </script>

这里直接写构造函数和原型对象部分

function Opacity(){
    //获取ul
    this.oUl =document.getElementsByClassName("slidUl");
    //获取盒子
    this.oDiv =document.getElementsByClassName("slidBox");
    //获取ul下的子元素 也就是li
    this.oLi =this.oUl[0].children;
    //获取ul子元素的长度
    this.len =this.oLi.length;
}
//设置怎么动
Opacity.prototype.move=function(){
        //遍历所有li 先将所有隐藏
        for(let i=0;i<this.len;i++){
            startMove(this.oLi[i],{"opacity":0});
        }
        //利用计时器 使第一个张首先亮相
        startMove(this.oLi[this.count],{"opacity":100});
        //每次亮相完 计时器++ 以便进入下一张
        this.count++;
        //三张都亮相完了 计时器计时第四次亮相的是第一张图片 一轮三张
        if(this.count == this.len){
            this.count = 0;
        }
}
//定时器来启动
Opacity.prototype.action=function(){
    this.count  =0;
    this.timer=setInterval(()=>{
        this.move();
    },3000);
}
//生成箭头 并设置功能
Opacity.prototype.arrow=function(){
    this.oBtn = document.createElement("div");
    this.oBtn.className ="btn";
    this.oBtn.innerHTML = `<span>&lt;</span><span>&gt;</span>`;
    this.oDiv[0].appendChild(this.oBtn);
    this.oSpan = this.oBtn.children;
    this.oSpan[0].onclick=()=>{
        this.move();
    }
    //回到前一张 且要克服++的影响
    this.oSpan[1].onclick=()=>{
        // this.count++;
        for(let i=0;i<this.len+2;i++){
            this.move();
        }
    } 
}
//关闭定时器
Opacity.prototype.clearInterval=function(){
    // console.log(this.timer);
    this.oDiv[0].onmouseover = ()=>{
        clearInterval(this.timer);
        // console.log(this.timer);
    }
    this.oDiv[0].onmouseout = ()=>{
        this.timer = setInterval(() => {
            this.move();
        }, 3000)
    }
}
function startMove(domobj, json, fn) {
    clearInterval(domobj.timer);
    domobj.timer = setInterval(function () {
        var flag = true; //假设所有的属性都达到了目标值
        for (var attr in json) {
            var iTarget = json[attr]; //取到目标值
            if (attr == "opacity") { //透明度的处理
                var iCur = parseInt(getStyle(domobj, "opacity") * 100);
            } else {
                var iCur = parseInt(getStyle(domobj, attr)); //取到当前值
            }
            var iSpeed = (iTarget - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (attr == "opacity") {
                domobj.style.opacity = (iCur + iSpeed) / 100;
                domobj.style.filter = "alpha(opacity=" + (iCur + iSpeed) + ")";
            } else {
                domobj.style[attr] = iCur + iSpeed + "px";

            }

            if (iTarget != iCur) { //只要有没达到的 flag为false
                flag = false;
            }
        }
        if (flag) { //只有在flag为true时才清定时器
            clearInterval(domobj.timer);
            if (fn) {
                fn();
            }
        }

    }, 100)
}
function getStyle(domobj, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(domobj, null)[attr];
    }
    return domobj.currentStyle[attr];
}