我的JS轮播图笔记（未完）

我的JS轮播图笔记（未完）

// //采用js面向对象的方式
// //1添加属性：通过this关键字
// //原型链
//
// //创建对象
// function Banner() {
//     // 这个里面写的代码相当于python中的__init__方法。加载。
//     console.log("hello");
//     //通过this关键字创建属性
//     this.person = 'zhang';
// }
//
// //通过原型链绑定方法
// Banner.prototype.greet = function (word) {
//     console.log('原型链绑定方法',word);
// };
//
// //实例化对象
// var banner = new Banner();
// console.log(banner.person);
// banner.greet('hi');


function Banner() {
    this.bannerGroup = $("#banner-group");
    this.leftArrow = $('.left-arrow');
    this.rightArrow = $('.right-arrow');
    this.listenBannerHover();
    this.bannerUl = $('#banner-ul');
    this.liList = this.bannerUl.children('li');
    this.bannerCount = this.liList.length;
    this.index = 0;
}

//绑定箭头隐藏显示事件
Banner.prototype.toggleArrow = function (isShow) {
    var self = this;
    if (isShow) {
        self.leftArrow.show();
        self.rightArrow.show();
    } else {
        self.leftArrow.hide();
        self.rightArrow.hide();
    }
};

//绑定箭头点击事件
Banner.prototype.listenArrowClick = function () {
    self = this;
    self.leftArrow.click(function () {
        if (self.index === 0) {
            self.index = self.bannerCount - 1;
        } else {
            self.index--;
        }
        self.animate();
    });
    self.rightArrow.click(function () {
        if (self.index === self.bannerCount - 1) {
            self.index = 0;
        } else {
            self.index++;
        }
        self.animate();
    })
};

//绑定监听鼠标滑过事件
Banner.prototype.listenBannerHover = function () {
    var self = this;
    this.bannerGroup.hover(function () {
        //hover有两个函数，第一个函数是鼠标移动上面的函数
        clearInterval(self.timer);
        self.toggleArrow(true);
    }, function () {
        //第二个函数是把鼠标从上面移走的函数
        self.loop();
        self.toggleArrow(false);
    })
};

//重复性的代码单独提出来
Banner.prototype.animate = function () {
    this.bannerUl.animate({"left": -798 * this.index}, 500);
};

//绑定轮播图逻辑事件
Banner.prototype.loop = function () {
    var self = this;
    //获取轮播图的ul元素

    //这种使用css的方法会一步到位，不适合轮播图
    // bannerUL.css({"left":-798});

    this.timer = setInterval(function () {
        if (self.index >= 3) {
            self.index = 0;
        } else {
            self.index++;
        }
        self.animate();
    }, 2000);
};


//绑定run事件
Banner.prototype.run = function () {
    this.loop();
    this.listenArrowClick();
};

//通过jquery的$方法确保html全部加载后再执行方法。
$(function () {
    var banner = new Banner();
    banner.run();
});