Question

我经营一个房地产网站，我有一个属性carrousel，我想修改这个JS，以便在用户使用鼠标时停止转盘。

代码：

var Ticker = new Class({
  setOptions: function (options) {
    this.options = Object.extend({
      speed: 5000,
      delay: 5000,
      direction: 'vertical',
      onComplete: Class.empty,
      onStart: Class.empty
    }, options || {});
  },
  initialize: function (el, options) {
    this.setOptions(options);
    this.el = $(el);
    this.items = this.el.getElements('li');
    var w = 0;
    var h = 0;
    if (this.options.direction.toLowerCase() == 'horizontal') {
      h = this.el.getSize().size.y;
      this.items.each(function (li, index) {
        w += li.getSize().size.x;
      });
    } else {
      w = this.el.getSize().size.x;
      this.items.each(function (li, index) {
        h += li.getSize().size.y;
      });
    }
    this.el.setStyles({
      position: 'absolute',
      top: 0,
      left: 0,
      width: w,
      height: h
    });
    this.fx = new Fx.Styles(this.el, {
      duration: this.options.speed,
      onComplete: function () {
        var i = (this.current == 0) ? this.items.length : this.current;
        this.items[i - 1].injectInside(this.el);
        this.el.setStyles({
          left: 0,
          top: 0
        });
      }.bind(this)
    });
    this.current = 0;
    this.next();
  },
  next: function () {
    this.current++;
    if (this.current >= this.items.length) this.current = 0;
    var pos = this.items[this.current];
    this.fx.start({
      top: -pos.offsetTop,
      left: -pos.offsetLeft
    });
    this.next.bind(this).delay(this.options.delay + this.options.speed);
  }
});

var hor = new Ticker('TickerVertical', {
  speed: 1000,
  delay: 4000,
  direction: 'horizontal'
});

Answer 1

这个版本的mootools真的很老了（1.1不是吗？）所以解决方案是这样的（未经测试）：

var Ticker = new Class({
  setOptions: function (options) {
    this.options = Object.extend({
      speed: 5000,
      delay: 5000,
      direction: 'vertical',
      onComplete: Class.empty,
      onStart: Class.empty
    }, options || {});
  },
  initialize: function (el, options) {
    this.setOptions(options);
    this.el = $(el);

    //set a flag according to the mouse in/out events:
    var self = this;
    this.el.addEvents({
         'mouseenter': function(){
            self.elementHover = true;
         },
         'mouseleave': function(){
            self.elementHover = false;
         }
    })

    this.items = this.el.getElements('li');
    var w = 0;
    var h = 0;
    if (this.options.direction.toLowerCase() == 'horizontal') {
      h = this.el.getSize().size.y;
      this.items.each(function (li, index) {
        w += li.getSize().size.x;
      });
    } else {
      w = this.el.getSize().size.x;
      this.items.each(function (li, index) {
        h += li.getSize().size.y;
      });
    }
    this.el.setStyles({
      position: 'absolute',
      top: 0,
      left: 0,
      width: w,
      height: h
    });
    this.fx = new Fx.Styles(this.el, {
      duration: this.options.speed,
      onComplete: function () {
        var i = (this.current == 0) ? this.items.length : this.current;
        this.items[i - 1].injectInside(this.el);
        this.el.setStyles({
          left: 0,
          top: 0
        });
      }.bind(this)
    });
    this.current = 0;
    this.next();
  },
  next: function () {
    if(!this.elementHover){ //check here the flag mouse in/out
       this.current++;
       if (this.current >= this.items.length) this.current = 0;
       var pos = this.items[this.current];
       this.fx.start({
          top: -pos.offsetTop,
          left: -pos.offsetLeft
        });
    }
    this.next.bind(this).delay(this.options.delay + this.options.speed);
  }
});

当鼠标悬停时JS旋转木马停止

1 个答案: