Question

我有一个网站，其中包含一个用于滑块的backstretch实例（在div #backstretch中），该实例是从网站本身上的图像数组加载的。数组如下所示：

function getMissions(defaultId) {
    return $.getJSON("Defaults/GetMissions", function (result) {
        var dropDownToFill = $('#change-mission');
        fillUpdateDropDown(dropDownToFill, result);
    });
}

function getSectors(defaultId) {
    return $.getJSON("Defaults/GetSectors", function (result) {
        var dropDownToFill = $('#change-sector');
        fillUpdateDropDown(dropDownToFill, result);
    });
}

function getDefaultDetails() { /* ... */ }

$.when(getMissions(defaultId), getSectors(defaultId))
 .done(function() { getDefaultDetails(defaultId) });

要在单击时更改此滑块的图像集，我使用jquery .load（）将新内容加载到我的网站中。新内容还包含一个包含新图像的数组。要启动加载，在滑块下方有一些带有.item类的div，以单击以开始加载新的图像集。通过单击一项，可以动态设置此处的网址以及各项的索引。

<script>
$('#backstretch').backstretch([
[
{ width: 1400, url: "./img/05_1400.jpg" },
{ width: 1000, url: "./img/05_1000.jpg" },
{ width: 780, url: "./img/05_780.jpg" },
{ width: 500, url: "./img/05_500.jpg" }
],
[
{ width: 1400, url: "./img/02_1400.jpg" },
{ width: 1000, url: "./img/02_1000.jpg" },
{ width: 780, url: "./img/02_780.jpg" },
{ width: 500, url: "./img/02_500.jpg" }
]
], {
fade: 2000,
duration: 5000
});
</script>

问题是，我第一次更改图像集时效果很好。旧集被销毁，新集正在滑动。但是，如果我点击下一个项目以加载下一个图像集，则旧图像和第一组图像也会出现在幻灯片中。它们并没有真正被摧毁。我该如何解决？

Answer 1

因此，在反向拉伸维护人员的帮助下，我现在可以正常工作。

jQuery(function(e) {
$(document).on("click", '.inneritem', function(index, element) {
var indexe = $('.inneritem').index(this);  // count items
var singleurl = 'single_' + indexe + '.html';  // create url for each item
$('html').animate({scrollTop: '0px'}, 1200).promise().then(function() {     // scroll to top
var $instance = $('#backstretch').data('backstretch');  // get the instance
$instance && $instance.destroy(true);  // destroy it
$('#singleview').fadeIn().load(singleurl);   // load new backstretch slides
});
});
});

目标是将调用放在正确的位置并销毁实例。在我所问的代码中，缺少一些代码来简化代码，但这是主要问题：

$('html, body').animate({scrollTop: '0px'}, 1200, function() {
$('#singleview').fadeIn().load(singleurl);

我想滚动顶部，然后再加载两次称为“反向拉伸”的内容（“ html，body”）。我以前没看过.promise（）。then（已添加。现在它就像一个吊饰一样。

.destroy（backstretch）不适用于ajax内容

1 个答案: