面向对象做的轮播图

html的结构

        

            
第一张
            
第二张
            
第三张
        
        

            

                
                    
                
            
            

                
                    
                
            
            

                
                    
                
            
        
    

js的部分

    做一个面对对象的选项卡
    1.定义一个构造函数
    2.new一个对象出来
    3.给对象绑定属性
    4.给需要操作的属性绑定事件
    function Tab() {
        //属性 - 就是会操作到的所有元素
        //将需要操作的元素作为对象的属性
        this.ulis = document.querySelectorAll('ul li')
        this.olis = document.querySelectorAll('ol li')
        var _this = this
        // console.log(this)
        //定义了一个新变量，叫_this，赋值this
        //给ulis属性绑定事件
        for (let i = 0; i < this.ulis.length; i++) {
            this.ulis[i].onclick = function () {
                _this.click(this, i)//_this就代表构造函数中的this
                //构造函数中的this就代表new出来的tab对象

            }
        }
    }
    //给对象的原型添加一个方法，来处理事件中的事情
    Tab.prototype.click = function (ele, j) {
        for (var i = 0; i < this.ulis.length; i++) {
            this.ulis[i].className = ''
        }
        // 怎么回去当前点击的这个li呢？ - 在当前方法中，是获取不到的 - 通过参数传递进来
        ele.className = "active"
        for (var i = 0; i < this.olis.length; i++) {
            this.olis[i].className = ''
        }
         // 让对应下标的oli添加active类名 - 当前被点击的这个li的下标
        this.olis[j].className = "active"
    }
    //new一个对象
    var tab = new Tab()

分享一个案例的夜晚，记录一下，可能现在觉得理解了方法，具体是实现的代码还不是很清楚，理解思路的过程对于现在水平的我还是比较不敏感的，加油哦，相信自己