轮播图js编写

//面向对象
function Left() {
    this.index = 0;
    this.lefthover = $('#left-content');
    this.listenhover();
    this.len = $('.left-ul').children('li').length
}
//定义箭头点击事件
Left.prototype.toggleclick = function () {
  var self = this;
  var leftUL = $('#left-ul');
    $('.left-arrow').click(function () {
        self.index-=1;
        if (self.index < 0){
            self.index = self.len - 1;
        }
        leftUL.animate({'left':-795 * self.index},500)
    });
  $('.right-arrow').click(function () {
      self.index+=1;
        if (self.index > 3){
            self.index = 0;
        }
        leftUL.animate({'left':-795 * self.index},500)
  });
};

//定义箭头显示和隐藏函数
Left.prototype.toggle = function (isShow) {
  if (isShow) {
      $('.left-arrow').show();
      $('.right-arrow').show();
  }else {
      $('.left-arrow').hide();
      $('.right-arrow').hide();
  }
};
//监听鼠标是否在轮播图片上
Left.prototype.listenhover = function () {
    var self = this;
    this.lefthover.hover(function () {
        clearInterval(self.timer);
        self.toggle(true)
    },function () {
       self.loop();
       self.toggle(false)
    });
};

//定义继续轮播图轮播
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)
};

//定义主函数run
Left.prototype.run = function () {
    this.loop();
    this.toggleclick();
};
//等待网页全部加载完执行
$(function () {
   var left = new Left();
   left.run()
});

 

转载于:https://www.cnblogs.com/fengzi7314/p/10363460.html