1

我有一个加载了 jQuery 内容的页面，其中一个 div 将是一个滑块

$('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 6000,
            pause: 2500,
            hoverPause: true,
            slideSpeed: 1000,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });

现在，html的结构如下：

<div id"content">
   <div id="slider"></div>
</div>

我已经使用 jquery 设置了我的页面，当用户点击一个链接时，它会将该页面的内容加载到#content

var homepage = $("#content").html();
$("#content").load("myContent.html");

如果用户回家，只需：

$("#content").html(homepage);

但后来$('#slides').slides();不再起作用了。

我该如何解决？

幻灯片JS

4

2 回答 2

3

您可以使用completefrom.load()来检查您的内容是否包含#slider在其中。如果是这样，请slides再次初始化您的插件。

var homepage = $('#content'),
options = {
    generateNextPrev: true,
    play: 1000
};
$('#slides').slides(options);

// Button click or something
$('#content').load('myContent.html', function(response, status, xhr) {
   if ($(response).find('#slider').length > 0) {
       $('#slides').slides(options);
   }
});

编辑：

我正在制作一个jsfiddle来演示它，但是jsfiddle有服务器问题，所以我做了一个codepen演示。http://codepen.io/Vestride/pen/LicKd。再次调用插件对我有用（尽管我只是通过替换内容来模拟 ajax 请求.html()）。

于 2012-07-17T05:32:17.417 回答
1

尝试这个，

将滑块放在一个函数中，

function SliderCode()
{

$('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 6000,
            pause: 2500,
            hoverPause: true,
            slideSpeed: 1000,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });
}

再次设置 hompage callslider 函数后，

$("#content").html(homepage);
SliderCode();

我没有测试代码。希望它会奏效。

于 2012-07-17T05:22:45.527 回答