JS面向对象轮播

浏览：822次- 评论：0次- 发布时间：2018-08-04

Html

Css

/* 
    Fn1是基础类；
    Fn2继承Fn1，同时扩展左右按钮；
    Fn3继承Fn2，同时扩展自动轮播
 */
var Fn1 = function(obj) {
    this.picLi = obj.picLi;
    this.tabLi = obj.tabLi;
    this.index = 0;
    this.init();
    this.tab();
}
Fn1.prototype = {
    constructor: Fn1,
    // 初始化
    init: function() {
        this.picLi[this.index].className = 'active'
        this.tabLi[this.index].className = 'active'
    },
    // 给tab注册事件
    tab: function() {
        var len = this.tabLi.length,
            that = this; // 存实例对象
        for (var i = 0; i < len; i++) {
            this.tabLi[i].i = i;
            this.tabLi[i].onclick = function() {
                var target = this;
                that.change(function() {
                    that.index = target.i;
                })
            }
        }
    },
    // change负责改变状态
    change: function(fn) {
        // 把之前状态的隐藏
        this.picLi[this.index].className = ""
        this.tabLi[this.index].className = ""
        // 把新状态更新this.index
        fn()
        // 把新状态的显示
        this.picLi[this.index].className = "active"
        this.tabLi[this.index].className = "active"
    }
}

var Fn2 = function(obj) {
    Fn1.call(this, obj)
    this.btnLi = obj.btn;
    if (!obj.btnFlag) {
        this.btn()
    }

}
// 继承
for (var key in Fn1.prototype) {
    Fn2.prototype[key] = Fn1.prototype[key]
}
Fn2.prototype.constructor = Fn2;
// 注册左右btn事件
Fn2.prototype.btn = function() {
    var that = this,
        len = this.btnLi.length;
    for (var i = 0; i < len; i++) {
        this.btnLi[i].i = i;
        this.btnLi[i].onclick = function() {
            var target = this;
            that.change(function() {
                if (target.i) { // 右btnLi
                    that.index++;
                    that.index %= that.picLi.length;
                } else { // 左btnLi
                    that.index--;
                    if (that.index < 0) {
                        that.index = that.picLi.length - 1;
                    }
                }
            })

}
    }
};
// 自动轮播
var Fn3 = function(obj) {
    Fn2.call(this, obj)
    this.parent = obj.parent;
    this.timer = null;
    this.auto();
}

for (var key in Fn2.prototype) {
    Fn3.prototype[key] = Fn2.prototype[key];
}
Fn3.prototype.constructor = Fn3;

Fn3.prototype.auto = function() {
    var that = this;
    that.timer = setInterval(function() {
        that.change(function() {
            that.index++;
            that.index %= that.picLi.length;
        })
    }, 3000);

// 鼠标移入清除计时器
    that.parent.onmouseenter = function() {
        clearInterval(that.timer);
    };

// 鼠标移出恢复自动播放
    that.parent.onmouseleave = function() {
        that.timer = setInterval(function() {
            that.change(function() {
                that.index++;
                that.index %= that.picLi.length;
            })
        }, 3000);
    }
}

new Fn1({
    picLi: document.querySelectorAll("#box1 .pic li"),
    tabLi: document.querySelectorAll("#box1 .tab li")
})

new Fn2({
    picLi: document.querySelectorAll("#box2 .pic li"),
    tabLi: document.querySelectorAll("#box2 .tab li"),
    btn: document.querySelectorAll("#box2 .btn"),
    btnFlag: false // 左右按钮开关 
})

new Fn3({
    picLi: document.querySelectorAll("#box3 .pic li"),
    tabLi: document.querySelectorAll("#box3 .tab li"),
    btn: document.querySelectorAll("#box3 .btn"),
    parent: document.getElementById("box3")
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js面向对象轮播图

原生js面向对象轮播：
主要原理根据类名显示和隐藏；运用面向对象的继承、多态性，分别展示3组轮播：普通轮播、左右按钮轮播、左右按钮+自动轮播
this指针是关键！

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取