Question

我是mootools的新手。我和MooSlider有joomla网站：

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首选项。

Mootools滑块调整

1 个答案: