1

jQueryコンテンツがロードされたページがあります。divの1つがスライダーになります

$('#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();機能しなくなります。

これを修正するにはどうすればよいですか？

SlidesJS

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);
            }
        });
    });
}

hompagecallslider関数を再度設定した後、

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

私はコードをテストしませんでした。それがうまくいくことを願っています。

于 2012-07-17T05:22:45.527 に答える