幻灯片使用Prototype和Scriptaculous

时间:2013-02-24 16:49:14

标签: prototypejs slideshow scriptaculous

我编写了我的第一个scriptaculous脚本来创建一个div元素之间的幻灯片:

    var SlideShow = Class.create({
    initialize:function(element, delayStart){
        this.element = element;
        this.delayStart = delayStart;


        this.slides = this.element.childElements();

        this.numberOfSlides = this.slides.size();

        this.numberActiveSlide = 1;

        this.start_slideshow();
    },

    start_slideshow: function() 
    {
        this.switch_slides.delay(this.delayStart);
    },

    switch_slides: function() 
    {
        this.slides[this.numberActiveSlide].fade();

        if (this.numberActiveSlide == this.numberOfSlides) { this.numberActiveSlide = 1; } else { this.numberActiveSlide = this.numberActiveSlide + 1; }

        Effect.Appear.delay(this.slides[this.numberActiveSlide], 850);

        this.switch_slides.delay(this.delay + 850);
    }


});

document.observe("dom:loaded", function(){
var slideshows = $$('div.slideshow');
slideshows.each(
    function(slideshow) {
        s = new SlideShow(slideshow, 2);
    });
});

但我总是遇到这个错误,而且我已经知道几个小时我无法弄明白我的问题所在!

  

Undefined不是对象(评估this.slides [this.numberActiveSlide]);

谢谢!

尼克

1 个答案:

答案 0 :(得分:0)

99%确定这是一个背景问题。请务必bind调用您的函数,以便在整个代码中保留this

调试thisswitch_slides的内容:它应与this中的start_slideshow相同。如果不是,请将您对switch_slides的通话绑定到您的实例:

start_slideshow: function() 
{
    this.switch_slides.bind(this).delay(this.delayStart);
},

你可能必须在它自称的switch_slides中做同样的事情。