Question

我正在使用jQuery的超大插件来显示完整的背景图片。我想用图像（jquery.click()）更改数组，但不重新加载页面。链接通过AJAX将内容加载到div中，同时我想切换数组。

这是我为超大尺寸加载的默认代码：

$.supersized({
    random: 1,
    image_protect: 0,
    slide_interval: 5000,
    transition: 1,
    transition_speed: 3000,
    vertical_center: 0,
    horizontal_center: 0,
    fit_portrait: 1,
    slides:
    [
        {image : 'imgs/bg-01.jpg'},
        {image : 'imgs/bg-02.jpg'},
        {image : 'imgs/bg-03.jpg'},
    ]
});

这就是我为更改数组所做的工作：

$('#link1').click(function() {
    // placeholder for ajax load

    $.supersized({
        random: 1,
        image_protect: 0,
        slide_interval: 5000,
        transition: 1,
        transition_speed: 3000,
        vertical_center: 0,
        horizontal_center: 0,
        fit_portrait: 1,
        slides:
        [
            {image : 'other-imgs/new-bg-01.jpg'},
            {image : 'other-imgs/new-bg-02.jpg'}
        ]
    });
});

但这只会将2个新图像添加到另一个3.如何清除第一个数组和/或替换它的内容？

Answer 1

已更新

以下是我使用动态幻灯片重新加载Supersized并使用新幻灯片防止它疯狂疯狂（我从幻灯片中随机跳转到另一个加速幻灯片）

在主JS文件中创建一个函数，该文件将被调用以更新幻灯片：

function start_supersized(slides) {
    $('#supersized-loader').empty().remove();
    $('#supersized').empty().remove();
    $('#hzDownscaled').empty().remove();
    $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    $.supersized({slides: slides}); // add your other SZ options here
};

我们在这里所做的就是清空并删除SZ附加到文档正文的DOM元素，并再次初始化插件。

然后我们可以用slide数组作为参数来调用这个函数，即：

var new_slides = [{image: "/img/slide1.png"}, {image: "/img/slide2.png"}];
start_supersized(new_slides);

但并非如此。我们需要在超大化的JS文件中调整几行（是的，它是一个黑客，但插件作者不会回复我）

在脚本的非缩小版本3.2.7中，您必须：

1）删除第一行，发生这种情况（第17/20行）

    $(document).ready(function() {
        $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    });

<强>更新

2）添加 var slideshow_intervals = [];

此数组将跟踪插件将创建的所有间隔ID

3）找到功能

    base._start = function() {

（第124行）并将此行添加到函数的顶部：

jQuery.each(slideshow_intervals, function(i, e) {
 clearInterval(e);
});

4）无论何处进行setInterval()调用，都将返回的值添加到数组中，如下所示：

slideshow_intervals.push(vars.slideshow_interval);

所有这些都用于重置超大的动画间隔，并防止脚本开始在帧和另一帧之间加速。我知道这有点像黑客，但是嘿。

Answer 2

停止超大型3.2.7加速重新初始化动态幻灯片。我在未压缩的javascript文件中进行了此更改：

搜索“base._start”函数（第116行）

糊： clearInterval（vars.slideshow_interval）;

在base._start函数的顶部，用于清除所有先前初始化的间隔。

应该这样做。

Answer 3

在再次调用超大脚本之前，我使用以下命令重置HTML内容：

jQuery("#thumb-list").remove();
jQuery("#supersized").html('');

它适用于我。

重置或更改jQuery插件的slide数组

3 个答案:

已更新