Mootools滑塊調整

Question

我是mootools的新手。我有Joomla網站與MooSlider：

var MooSlider = new Class({ 
initialize: function(options) { 
    this.options = Object.extend({ 
     container: null, 
     slides: null, 
     navs:null, 
     transition: Fx.Transitions.Sine.easeOut, 
     effectDuration: 500, 
     fromTop: 500, 
     topDist: 100, 
     slideDelay: 5000 
    }, options || {}); 

    if(!$(this.options.container)) return; 
    this.start(); 
}, 

start: function(){ 
    this.elements = $(this.options.container).getElements(this.options.slides); 
    this.navs = $(this.options.container).getElements(this.options.navs); 
    this.currentElement = 0; 

    this.elements.each(function(elem, i){ 
     var nav = this.navs[i]; 

     if(i==this.currentElement){ 
      nav.addClass('selected');    
     } 
     elem.setStyles({ 
      'position':'absolute', 
      'top':0, 
      'left':0, 
      'opacity':(i==this.currentElement ? 1 : 0) 
     }); 

     this.elements[i]['fx'] = new Fx.Styles(elem, { 
      duration:this.options.effectDuration, 
      wait:false, 
      transition:this.options.transition 
     }); 
     this.elements[i]['nav'] = nav; 

     elem.addEvents({ 
      'mouseenter': function(){ 
       $clear(this.period); 
      }.bind(this), 
      'mouseleave': function(){ 
       if(this.options.slideDelay) 
        this.period = this.rotate.periodical(this.options.slideDelay, this); 
      }.bind(this)    
     }); 

     nav.addEvent('click', function(event){ 

      if(this.currentElement==i) return; 
      new Event(event).stop();     
      $clear(this.period); 
      this.changeSlide(i); 
      if(this.options.slideDelay) 
       this.period = this.rotate.periodical(this.options.slideDelay, this); 

     }.bind(this)); 

    }.bind(this)); 
    if(this.options.slideDelay) 
     this.period = this.rotate.periodical(this.options.slideDelay, this); 

}, 

rotate: function(){ 
    var i = this.currentElement+1 < this.elements.length ? this.currentElement+1 : 0; 
    this.changeSlide(i); 
}, 

changeSlide: function(i){ 
    //$(this.options.navigationContainer).addClass('preload'); 
    var cEl = this.currentElement; 
    this.elements[this.currentElement]['fx'].start({'opacity':0, 'left':1500}); 

    this.elements[i]['fx'].set({'left':0}); 
    this.elements[i]['fx'].start({'opacity':1, 'top':[500,0]}).chain(function(){ 
     //$(this.options.navigationContainer).removeClass('preload');   
    }.bind(this)); 

    this.elements[this.currentElement]['nav'].removeClass('selected'); 
    this.elements[i]['nav'].addClass('selected'); 

    this.currentElement = i; 
}}) 

這是怎麼使用的頁面上：

<script language="javascript" type="text/javascript"> 
window.addEvent('domready', function(){ 
    new MooSlider({ 
     container:'topslider', 
     slides:'.slide', 
     navs:'.navigator ul li', 

     effectDuration: 1000, 
     fromTop:500, 
     topDist:500, 
     slideDelay: 3000  }); 
}) 

該網頁的網址爲http://www.miltonwebsitedesign.ca

你可以看到頂部滑塊頁。每張幻燈片由左側的圖片和右側的圖片組成。

我需要的是使幻燈片的工作方式相同，但左側的畫面不能出現電流的方式，它需要淡入，當滑動被加載，沒有出現，但在褪色。

說明文字幻燈片，然後出現左側圖片。

每張幻燈片的結構是：

<div class='slide'> 
    <div class="yjsquare"> 
     <div class="yjsquare_in"> 
     <img src='src here' alt=''/><h1>H1 text here</h1><p>description here</p> 
     </div> 
    </div> 
</div> 

會很高興聽到的解決方案。謝謝。

Answer 1

該班級寫得不好，不允許像onStart和onComplete這樣的事件通過。邏輯的方法是修改changeSlide方法火一些事件：

// add 
var el = this.elements[i]['fx']; 
this.fireEvent("start", el); 

// use el as reference... 
el.start({'opacity':1, 'top':[500,0]}).chain(function(){ 
     //$(this.options.navigationContainer).removeClass('preload');   
    // add 
    this.fireEvent("complete", el); 
}.bind(this)); 

請確保您的類也實現活動（在1.12完成像這樣，如果沒有記錯）：

MooSlider.implement(new Events); 

你正在使用混合1.12和1.2+奇數代碼。在任何情況下，如果你有1.2（的Joomla通常不是之前的1.6），那麼反而加入到類聲明如下：

Implements: [Events], 

這可以讓你在煽動類添加一些回調邏輯：

new MooSlider({ 
    container:'topslider', 
    slides:'.slide', 
    navs:'.navigator ul li', 

    effectDuration: 1000, 
    fromTop:500, 
    topDist:500, 
    slideDelay: 3000, 
    onStart: function(el) { 
     el.getElement("img").setOpacity(0); // hide it during animation 
    }, 
    onComplete: function(el) { 
     el.fade(1); // fade it in when done 
    } 
}); 

你應該真的實現選項，並使用this.setOptions(options)而不是你現在的$ extend。

p.s. onStart和onComplete代碼回調就是例子，你可能需要調整它以適應你的html和UI偏好。