0

我正在使用旧版本的 Slidedeck 插件 (v.1.4.5)，并且我正在使用的其中一种皮肤存在 javascript 问题。更准确地说，水平幻灯片被缝合在一起，我不知道如何解决这个问题。我希望每张幻灯片都是独立的，不会在活动幻灯片上看到下一张或上一张幻灯片的任何内容。

您可以在下面的屏幕截图中看到，中间幻灯片具有上一张和下一张幻灯片的可见内容，显然我不想看到这些内容。

在此处输入图像描述

我应该提一下，我对 javascript / jQuery 的了解非常有限，我怀疑这是一个 js 问题，因为所有皮肤的 CSS 都是相同的——唯一的变量是每个皮肤使用的脚本。

您可以在此网站上查看滑块行为，以下是用于滑块皮肤的完整脚本。我将不胜感激这方面的任何帮助。要更改幻灯片，请单击左侧或右侧的每个幻灯片箭头，或者您可以使用键盘上的方向键。 

(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck){
    var ns = 'fullwidth-sexy';
    var elems = {};
        elems.slidedeck = $(slidedeck);
        elems.frame = elems.slidedeck.closest('.skin-' + ns);

    // Disable spines as this skin is not meant to function with spines on
    elems.slidedeck.slidedeck().setOption('hideSpines', true);

    elems.frame.append('<a href="#prev" class="sd-' + ns + '-nav prev">Previous</a><a href="#next" class="sd-' + ns + '-nav next">Next</a>');
    elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');

    elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
        event.preventDefault();
        var $this = $(this);
        elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
        if($this.hasClass('prev')){
            elems.slidedeck.slidedeck().prev();
        } else {
            elems.slidedeck.slidedeck().next();
        }
    });
};

$(document).ready(function(){
    $('.skin-fullwidth-sexy .slidedeck').each(function(){
        if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
            $.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'](this));
        }
    });
});
})(jQuery);
4

1 回答 1

1

以下可能有效，但如果没有您正在尝试做的示例，很难进行测试。

我所做的是向ns变量添加一个唯一编号（对于我假设的命名空间）。这个编号被传递给每个函数的回调。（文档）

(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck,uniqueName){
    var ns = 'fullwidth-sexy'+uniqueName;
    var elems = {};
        elems.slidedeck = $(slidedeck);
        elems.frame = elems.slidedeck.closest('.skin-' + ns);

    // Disable spines as this skin is not meant to function with spines on
    elems.slidedeck.slidedeck().setOption('hideSpines', true);

    elems.frame.append('<a href="#prev" class="sd-' + ns + '-nav prev">Previous</a><a href="#next" class="sd-' + ns + '-nav next">Next</a>');
    elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');

    elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
        event.preventDefault();
        var $this = $(this);
        elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
        if($this.hasClass('prev')){
            elems.slidedeck.slidedeck().prev();
        } else {
            elems.slidedeck.slidedeck().next();
        }
    });
};

$(document).ready(function(){
    $('.skin-fullwidth-sexy .slidedeck').each(function(n){
        if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
            $.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'+n](this,n));
        }
    });
});
})(jQuery);
于 2012-07-01T19:50:19.997 回答