轮播图js编写

Posted 2021-02-08 疯子7314

//面向对象
function Left() {
    this.index = 0;
    this.lefthover = $(‘#left-content‘);
    this.listenhover()
}
//监听hover事件（鼠标放上去轮播图停止）
Left.prototype.listenhover = function () {
    var self = this;
    this.lefthover.hover(function () {
        clearInterval(self.timer)
    },function () {
       self.loop();
    });
};
//实现轮播图的滚动
Left.prototype.loop = function () {
    var leftUL = $(‘#left-ul‘);
    var self = this;
    this.timer = setInterval(function () {
        if (self.index >= 3){
            self.index = 0
        }else {
            self.index += 1;
        }
        leftUL.animate({‘left‘:-795 * self.index},500)
    },2000)
};

//轮播图继续滚动
Left.prototype.run = function () {
    this.loop()
};

//等待html全部加载完成后执行
$(function () {
   var left = new Left();
   left.run()
});