首页 > Web开发 > 详细

轮播图js编写

时间:2019-02-11 22:48:01      阅读:216      评论:0      收藏:0      [点我收藏+]
//面向对象
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编写

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!