面向对象简易轮播图实现

思路:

        根据图片遍历获得索引，

        利用索引创建绑定下方按钮，

        通过移动图片父元素的左间距实现图片切换，

        自动调用右切图方法实现自动轮播。

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto auto;
            border: 2px solid skyblue;
            padding: 20px;
            /* position: relative; */
        }

        .button {
            height: 60px;
            width: 300px;
            position: absolute;
            left: 0;
            top: 135px;
            display: flex;
            justify-content: space-between;
            margin: 0 20px;
            /* background: black; */
            display: none;
            /* display: block; */
        }

        .button span {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            opacity: 0.8;
            background: white;
            font-size: 60px;
            color: black;
            line-height: 50px;
            text-align: center;

        }

        #left {
            position: absolute;
            left: 0;
        }

        #right {
            position: absolute;
            right: 0;
        }

        img {
            width: 300px;
            height: 300px;
        }

        ul {
            display: flex;
            position: relative;
            left: 0;
        }

        ol {
            display: flex;
            position: absolute;
            right: 22px;
            bottom: 30px;
            /* background: black; */

        }

        ol li {
            width: 30px;
            height: 30px;
            background: white;
            border: 1px solid black;
            margin-left: 10px;
            line-height: 30px;
            text-align: center;
        }

        .color {
            background: yellow;
        }

        .screen {
            display: block;
            overflow: hidden;
        }
    </style>

html部分

图片部分需要引用自己的图片，修改地址即可

<div id="box">
        <div class="screen">
            <ul>
                <li><img src="../../images/77.jpg" alt=""></li>
                <li><img src="../../images/hutao1.jpg" alt=""></li>
                <li><img src="../../images/qin.jpg" alt=""></li>
                <li><img src="../../images/ganyu.jpg" alt=""></li>
                <li><img src="../../images/mona.jpg" alt=""></li>
            </ul>
            <ol>

            </ol>
        </div>
        <div class="button">
            <span id="left">
                <</span> <span id="right">>
            </span>
        </div>
    </div>

js部分

    <script>
        let box = document.querySelector("#box")
        box.addEventListener
        class move {
            constructor() {
                this.box = this.$("#box");
                this.ul = this.$("ul")
                this.ol = this.$("ol");
                this.btn = this.$(".button");
                this.li = this.$("ul li");
                this.img = this.$("img");
                this.left = this.$("#left");
                this.right = this.$("#right");
                //用于储存遍历
                this.index = 0;
                //用处储存计时器
                this.timess = 0;

                this.ulLi = this.ul.children;
                this.olLi = this.ol.children;
                this.imgW = this.img.offsetWidth;
                this.box.addEventListener("mouseover", this.overFn.bind(this));
                this.box.addEventListener("mouseout", this.outFn.bind(this));
                this.right.addEventListener("click", this.clickFnR.bind(this));
                this.left.addEventListener("click", this.clickFnL.bind(this));
                //默认调用运动函数，自动轮播
                this.auto();

                //遍历绑定下方按键方法
                for (let i = 0; i < this.ulLi.length; i++) {
                    //创建按键li
                    this.newLi = document.createElement("li");
                    // 给予每个li一个innerHTML值
                    this.newLi.innerHTML = i + 1;
                    //将新增的按键添加到this.ol中
                    this.ol.appendChild(this.newLi);
                    //默认给予第一张对应按键color类
                    i == 0 && this.newLi.classList.add("color");
                    //绑定点击二级事件，并传递i的值，(做到查找当前图片位置)
                    this.newLi.addEventListener("click", this.clickFn.bind(this, i));
                }
            }
            //左右按钮的出现方法
            overFn() {
                this.btn.style.display = "block";
                clearInterval(this.timess);
            }
            //左右按钮的消失方法
            outFn() {
                this.btn.style.display = "none";
                this.auto();
            }
            //带数字按键的方法
            clickFn(i) {
                //获取左移距离、设置左移距离
                //拿到遍历，给予this.index这个遍历值
                this.index = i;
                this.classOn(i);
            }

            //点击右箭头方法
            clickFnR() {
                this.index++;
                //判断是否达到最右边图片，如达到就跳转到第一张.
                if (this.index == this.ulLi.length) this.index = 0;
                let i = this.index;
                this.classOn(i);
            }

            //点击左箭头方法
            clickFnL() {
                this.index--;
                //判断是否达到最左边图片，如达到就跳转到最后一张
                if (this.index == -1) this.index = this.ulLi.length - 1;
                let i = this.index;
                this.classOn(i);
            }
            //按钮被选中方法
            classOn(i) {
                //图片移动
                let tmpx = this.imgW * i;
                this.ul.style.left = -tmpx + "px";
                
                //给予当前color类清除color类，
                this.$(".color").classList.remove("color");
                //给予当前点击按键color类
                this.olLi[i].classList.add("color");

            }
            // 自动轮播
            auto() {
                this.timess = setInterval(() => {
                    //定时调用右箭头方法
                    this.clickFnR();
                }, 3000)
            }

            //节点绑定方法
            $(tag) {
                return document.querySelector(tag);
            }
        }
        new move;
    </script>

难点：

        如何获取图片索引，并在其他方法中调用

        判断自加索引是否达到尽头，避免不能循环显示

        小细节:移入需要暂定计时器，移出恢复计时器