0

私は Javascript と jQuery に非常に慣れていないため、レスポンシブ スライド ショーを作成しようとして深いところに飛び込んでしまった可能性があります。setInterval を使用して個々のスライドをスライダー コンテナーの幅と等しくなるように設定する関数を使用して、ウィンドウに合わせてスライダーのサイズを変更するという点で、次のコードがあります。

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt,
    responseSlider;

// Initially set the width of the li to equal the width of the slider
$('.slider ul').children('li').width(sliderWidth);                  

// Run a function that keeps making the 
//   li width equal the slider when window is resized
function resizeSlider(){
    responseSlider = setInterval(function(){
        slider      = $('.slider'),
        sliderWidth = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);           
    },10);
}


$(window).resize(resizeSlider);

clearInterval(responseSlider);

これは正しい方法ではないかもしれませんが、ウィンドウのサイズが再度変更されるまで、clearInterval を使用して setInterval の実行を停止できるかどうかを知りたいです。現在の状態では、コンソールを見ると、幅を記録し続けています。

前もって感謝します！

4

3 に答える 3

1

要素のサイズが変更されているかどうかを確認するために、サイズ変更メソッド内でタイマーを使用する必要はありません。resize メソッドは、要素のサイズ変更をリッスンします。

http://api.jquery.com/resize/

var slider          = $('.slider'),         // Get the div with a class of slider
    sliderWidth     = slider.width(),       // Get the width of the slider
    gallery         = $('.slider ul'),
    slides          = $('.slider ul').children('li'),
    noOfSlides      = slides.length,
    speed           = 5000,
    current         = 0,
    slideShowInt;


$('.slider ul').children('li').width(sliderWidth);                  // Initially set the width of the li to equal the width of the slider

function resizeSlider(){

        slider          = $('.slider'),
        sliderWidth     = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);
}


$(window).resize(resizeSlider);

これが採用したくないアプローチであり、タイマーを他の目的に使用したい場合は、次の方法を確認してください。

setTimeout: https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

clearTimeout: https://developer.mozilla.org/en-US/docs/DOM/window.clearTimeout

于 2013-02-09T20:16:03.377 に答える
0

I think what you want is as simple as this :

var slider = $('.slider'),// Get the div with a class of slider
    slides = $('.slider ul').children('li'),
    $w = $(window);

function handleResize() {
    $w.on('resize', resizeSlider);
}
function resizeSlider() {
    slides.width(slider.width());
    $w.off('resize');
    setTimeout(handleResize, 100);//adjust to the highest acceptable value.
}
resizeSlider();//run resizeSlider() to initialize everything.

The $w.off('resize') statement together with the setTimeout(handleResize, 100) statement reduce the frequency at which resizeSlider is called. Otherwise the frequency would be very high and probably make the whole browser sluggish while being resized.

于 2013-02-09T20:52:03.667 に答える
0

そもそも setInterval を使用しようとしている理由がよくわかりません。時間をかけてアニメーション化しようとしている場合を除き、ウィンドウのサイズが変更されるのをリッスンしてから、間隔なしでサイズ変更操作を実行できます。間隔を使用する必要がある場合は、この効果を試してみませんか。

var myFlag = false;

function resizeSlider(){
    responseSlider = setInterval(function(){
        var myFinalWidth = //what ever you want your final width to be 
        slider          = $('.slider'),
        sliderWidth     = slider.width();

        slides.width(sliderWidth);
        console.log(sliderWidth);
if(myFinalWidth == slides.width){
myFlag = true; 
}

    },10);                                                          
}

$(window).resize(function(){
resizeSlider(); 
if(myFlag){
clearInterval(responseSlider); 
}
});

上記のコードが機能しない理由は、グローバルスコープでクリア間隔を呼び出しているため、最初に間隔を設定する前に実行されるためです。呼び出しを同じ匿名関数に入れることで、それらは次々に実行されます。どういうわけか、私はあなたが求めていることに完全には従っていないので、これがお役に立てば幸いです.

于 2013-02-09T20:17:20.690 に答える