自己封装的的轮播图类 js 可实现左右 上下 透明度 切换

提示：封装的的轮播图

---

html基本格式

提示：
1.html基本结构为

 <div class="banner">//此div内只允许出现一次ul，大小为一个li大小 有 overflow: hidden;
        <div class="qh">//内部div为li数量-1
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        <ul class="banner_img  clear">(每个li为一个轮播图)要求li的大小一致 最后一个li的内容与第一个相同，内部li左浮动
            <li>

            </li>
            <li>
           
            </li>
            <li>
          
            </li>
            <li>
     
            </li>
            <li>
           
            </li>
            <li>
            
            </li>
            <li>

            </li>
            <li>
            
            </li>
        </ul>
    </div>

1.css代码如下

   .banner {
            position: relative;
            margin: auto;
            margin-top: 20px;
            width: 1140px;
            height: 600px;
            border: 1px solid #000;
            overflow: hidden;
        }

        .banner ul {
            position: relative;
            height: 600px;
        }

        .banner ul li {
            width: 1140px;
            height: 600px;
            float: left;
        }

        .banner ul img {
            width: 1140px;
            height: 600px;
            object-fit: cover;
        }

        .banner>div {
            position: absolute;
        }

        .banner .qh {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 20px;
            z-index: 1;
        }

        .banner .qh div {
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border: 1px solid #f0f;
            border-radius: 5px;
            float: left;
            z-index: 1;
        }

        .left {
            top: 0;
            bottom: 0;
            margin: auto;
            height: 40px;
            width: 20px;
            background: #f0f;
            left: 0;
            z-index: 1;
        }

        .right {
            top: 0;
            bottom: 0;
            margin: auto;
            height: 40px;
            background: #f0f;
            width: 20px;
            right: 0;
            z-index: 1;


        }

        .asd {
            background: transparent;
        }

        .bsd {
            background: #f0f;
        }

2.js代码如下

代码如下（示例）：

     var odiv = document.querySelector(".banner");
        var oqh = document.querySelector(".qh")
        var aqh_div = oqh.querySelectorAll("div");
        class Carousel {
            constructor(id, i = 0, style = "left", aSub, subStyle, subStyleHover) {
                this.main = id;
                this.imageUl = this.main.querySelector("ul");
                this.aitemli = this.imageUl.querySelectorAll("li");
                this.unit = undefined;//li单位宽/高
                this.aSubscriptDiv = aSub;//小圆圈的集合
                this.subStyle = subStyle;//小圆圈默认样式
                this.subStyleHover = subStyleHover;//到那一张是的小圆圈样式
                this.style = style;
                this.i = 0;
                this.init();//初始化单位宽 和ul的宽度
                this.move(i);//移动至第i张
            }
            init() {
            
                this.main.style.position = "relative"
                switch (this.style) {
                    case "left":
                        for (let i = 0; i < this.aitemli.length; i++) {
                            this.aitemli[i].style.flaot = "left";
                        }
                        this.unit = this.aitemli[0].offsetWidth;
                        this.imageUl.style.width = this.aitemli.length * this.unit + "px";
                        this.imageUl.style.position = "absolute";
                        this.imageUl.style.left = 0 + "px";
                        this.imageUl.style.top = 0 + "px"
                        break;
                    case "top":
                        for (let i = 0; i < this.aitemli.length; i++) {
                            this.aitemli[i].style.flaot = "left";
                        }
                        this.unit = this.aitemli[0].offsetHeight;
                        this.imageUl.style.width = this.aitemli[0].offsetWidth + "px";
                        this.imageUl.style.height = this.aitemli.length * this.unit + "px";
                        this.imageUl.style.position = "absolute";
                        this.imageUl.style.left = 0 + "px";
                        this.imageUl.style.top = 0 + "px"
                        break;
                    case "opacity":
                        for (let i = 0; i < this.aitemli.length; i++) {
                            this.aitemli[i].style.position = "absolute";
                            this.aitemli[i].style.left = 0 + "px";
                            this.aitemli[i].style.top = 0 + "px"
                        }
                        break;
                    default:
                        console.error("错误style=" + this.style);
                        break;
                }

                if (this.aSubscriptDiv) {
                    this.initSubscriptDiv();
                    for (let j = 0; j < this.aSubscriptDiv.length; j++) {
                        this.aSubscriptDiv[j].onclick = () => {
                            this.move(j);
                        }
                    }
                }
                  console.log("筱欣:初始化轮播图成功");
            }

            initSubscriptDiv() {
                if (this.aSubscriptDiv) {
                    for (var j = 0; j < this.aSubscriptDiv.length; j++) {
                        this.aSubscriptDiv[j].className = this.subStyle;
                    }

                    if (this.i < this.aitemli.length - 1) {
                        this.aSubscriptDiv[this.i].className = this.subStyleHover;
                    } else {
                        this.aSubscriptDiv[0].className = this.subStyleHover;
                    }

                }
            }
            next() {//下一张
                if (this.i + 1 < this.aitemli.length) {
                    this.move(this.i + 1);
                } else {
                    switch (this.style) {
                        case "left":
                            this.imageUl.style.left = "0" + "px";
                            break;
                        case "top":
                            this.imageUl.style.top = "0" + "px";
                            break;
                        case "opacity":
                            break;
                        default:
                            console.error("错误style=" + this.style);
                            break;
                    }
                    this.i = 0;
                    this.move(this.i + 1);
                }
            }
             back() {//上一张
                if (this.i - 1 >= 0) {
                    this.move(this.i  - 1);
                    console.log(1);
                } else {
                    switch (this.style) {
                        case "left":
                            this.imageUl.style.left =-(this.aitemli.length - 1) * this.unit + "px";
                            break;
                        case "top":
                            this.imageUl.style.top = -(this.aitemli.length - 1) * this.unit + "px";
                            break;
                        case "opacity":
                            break;
                        default:
                            console.error("错误style=" + this.style);
                            break;
                    }
                    this.i = this.aitemli.length - 1;
                  this.move(this.i - 1);
                }
            }
            move(i) {//跳到第i张（i从0开始）	
                switch (this.style) {
                    case "left":
                        this.i = i;
                        var left = i * (-this.unit);
                        startMove(this.imageUl, { left: left });

                        this.initSubscriptDiv(i);

                        break;
                    case "top":
                        this.i = i;
                        var top = i * (-this.unit);
                        startMove(this.imageUl, { top: top });

                        this.initSubscriptDiv(i);

                        break;
                    case "opacity":
                        this.i = i;
                        for (let j = 0; j < this.aitemli.length; j++) {
                            startMove(this.aitemli[j], { opacity: 0 });
                        }
                        startMove(this.aitemli[this.i], { opacity: 100 });


                        this.initSubscriptDiv(i);

                        break;
                    default:
                        console.error("错误style=" + this.style);
                        break;
                }

            }
        }

			//第一个参为轮播图外部div的元素节点对象 (必须)
			//第二个参为从第几张开始 (可选默认为0)
			//第三个参切换方式左右切换传"left" 上下切换传"top" 透明度切换传"opacity"(默认为左右)
			//第四参是1下方显示第几章的小圆圈的元素节点集合 传出此参后必须需传后两个参
			//第五个参为默认的classname //小圆圈的
			//第六个为切换到时的classname //小圆圈的
        var ccc = new Carousel(odiv, 0, "opacity", aqh_div, "asd", "bsd");

        odiv.Interval = setInterval(//轮播图动起来
            function () {
                ccc.next();
            }
            , 1000
        );

        odiv.onmouseenter = function () {//鼠标移入时轮播图暂停
            clearInterval(odiv.Interval);
        };
        odiv.onmouseleave = function () {//出继续动
            clearInterval(odiv.Interval);
            odiv.Interval = setInterval(function () {
                ccc.next();
            }, 1000);
        };

//左右切换按钮事件添加
        var left_btn = document.querySelector(".left");
        var right_btn = document.querySelector(".right");
        left_btn.onclick = function () {
            ccc.back();
        }
        right_btn.onclick = function () {
            ccc.next();
        }




//下方是一个缓冲运动函数





        /**
      *
      * @param obj 运动的对象
      * @param json {width:400, height:400}
      * @param fnEnd回调
      */
        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;
                for (attr in json) {
                    // 1. 取得当前的值（可以是widht，height，opacity等的值）
                    var objAttr = 0;
                    if (attr == "opacity") {
                        objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        objAttr = parseInt(getStyle(obj, attr));
                    }
                    // 2.计算运动速度
                    var iSpeed = (json[attr] - objAttr) / 20;//缓冲运动
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    // 3. 检测所有运动是否到达目标
                    if (objAttr != json[attr]) {
                        bStop = false;
                    }
                    if (attr == "opacity") {
                        obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
                        obj.style.opacity = (objAttr + iSpeed) / 100;
                    } else {
                        obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[]
                    }
                }
                if (bStop) { // 表示所有运动都到达目标值
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 10);
        }


        /**
         * 获取行间/内联/外部样式，无法设置
         * @param obj
         * @param attr
         */
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

总结

提示：没事写的