码迷,mamicode.com
首页 > Web开发 > 详细

轮播图js编写

时间:2019-02-11 22:46:57      阅读:343      评论:0      收藏:0      [点我收藏+]

标签:面向   this   nbsp   color   div   bsp   type   执行   lis   

//面向对象
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()
});

 

轮播图js编写

标签:面向   this   nbsp   color   div   bsp   type   执行   lis   

原文地址:https://www.cnblogs.com/fengzi7314/p/10363460.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!