0

そのため、数年前に私の組織によって作成された jQuery を読み込もうとしています。私は jQuery にはあまり精通していません (ただし、Javascript には問題ありません)。ユーザーがカーソルを合わせた場合、スライドが次のスライドに回転しないようにしようとしています。

これがコードの最初の部分です。決定しているのは、スライドをどこにどのように表示するかだけだと思います。7秒ごとにスライドが切り替わるとも書いてあると思います。

var current_slide_index = 0; //The index of the slide being displayed;
var timer; //the timer counting the delay to the transition
var time_delay = 7000;

    $(document).ready( function() {



        $('.pane:first').addClass('current');

        if (!$.support.opacity) $('.panes .pane').not('.current').hide();

        $('.tabs a').click( function(e) {
            e.preventDefault();

            var triggers = $('.tabs a');
            current_slide_index = triggers.index($(this));

            showSlide();

            });

        });


function showSlide() //Show the slide indicated by current_slide_index
{
    var triggers = $('.tabs a');
    triggers.removeClass('current').eq(current_slide_index).addClass('current');
            var old_slide = $('.panes .pane.current');

            if (!$.support.opacity) {
                old_slide.children().fadeOut(500, function() {
                    old_slide.removeClass('current').hide();
                    $('.panes .pane').eq(current_slide_index).addClass('current').show().children().fadeIn(300);
                    });
            } else {
                old_slide.removeClass('current').fadeOut(500, function() {
                    $('.panes .pane').eq(current_slide_index).addClass('current').fadeIn(300);
                    });
                }

    clearTimeout(timer);
    timer = setTimeout('rotateSlide()',time_delay);

}

これは私が止めなければならないセクションだと思います - 問題のスライドの上にカーソルを置いているかどうかを決定する何らかの条件を設定することでそれを行うことができますか? これは、私の jQuery の知識の欠如が私を苦しめているところです。

function rotateSlide() //move the slide to the next one
{
        //calculate the next index
        var triggers = $('.tabs a');
        //wrap to index zero if necessary
        current_slide_index = (current_slide_index + 1) % triggers.length;

        //Now show the new slide
        showSlide();

}


timer = setTimeout('rotateSlide()',time_delay);

私の質問は、誰でもこのコードをより明確に解釈できますか?また、スライダーにカーソルを合わせたときにスライダーがスライドしないようにする方法はありますか?

私が知る限り、 #slider を選択して次のようなものを使用できます (これは疑似コードです)。

if ($("slider").hover) {
blah blah blah thing that prevents slide from rotating
}
else {
code that allows rotating
}
4

2 に答える 2

1

コードの理解は非常に正確です。あなたが望む機能を実装するために、私はいくつかのことをします。まず、タイマーコードを次のような関数のペアに移動します。

function holdThisSlide() {
  clearTimeout(timer);
}

function showNextSlideIn(delay) {
  delay = delay || time_delay;
  holdThisSlide();
  timer = setTimeout('rotateSlide()',delay);
}

次に、showNextSlideIn()の下部に呼び出しを配置しshowSlide​​ます。ここで、clearTimeout/setTimeout行を削除しました。

最後に、関数定義の上にホバリングの動作を追加します。

$(".panes .pane").hover(
  function() { holdThisSlide(); },
  function() { showNextSlideIn(); }
);
于 2012-06-01T13:59:38.010 に答える
0

あなたが投稿したコードはあまりよく書かれていませんが、ここであなたが望むことをするための簡単な修正があります. おそらく最善の方法は、マウスがスライド コンテナー上にあるときにタイムアウトをクリアし、マウスが離れたときに新しいタイムアウトを設定することです。

次のようになります。

$('#slidecontainer').hover(    // setting hover handlers for #slidecontainer
    function() {    // mouse enter
        clearTimeout(timer);
    },
    function() {    // mouse leave
        timer = setTimeout('rotateSlide()', time_delay);
    }
)
于 2012-06-01T13:57:38.800 に答える