10

我正在使用 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 个。如何清除第一个数组和/或替换它的内容？

4

3 回答 3

9

更新

这是我用动态幻灯片重新加载 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 元素，然后再次初始化插件。

然后我们可以用幻灯片数组作为参数调用这个函数，即：

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

但这还不是全部。我们需要在超大的 JS 文件中调整几行（是的，这是一个 hack，但插件作者不会回复我）

在脚本的未缩小版本 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);

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

于 2012-05-24T13:03:19.123 回答
2

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

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

粘贴：clearInterval（vars.slideshow_interval）；

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

应该这样做。

于 2014-05-01T10:05:59.787 回答
0

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

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

它对我有效。

于 2012-04-13T08:57:55.430 回答