3

jQuery スライドショーで画像にカーソルを合わせたときに一時停止効果を追加するにはどうすればよいですか?

$(document).ready(function () {
    slideShow();
});

function slideShow() {
    var showing = $('#slideshow .show');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');
    var timer;
    showing.fadeOut(500, function () {
        next.fadeIn(200).addClass('show');
    }).removeClass('show');
    setTimeout(slideShow, 3000);
}
4

4 に答える 4

3 
var hovering = false;               //default is not hovering
$("#slideshow").hover(function () { //*replace body with your element
    hovering = true;                //when hovered, hovering is true
}, function () {
    hovering = false;               //when un-hovered, hovering is false
    slideShow();                    //start the process again
});

function slideShow() {
    if(!hovering) {                 //if not hovering, proceed
        /* Your code here*/
        nextSlide();
        setTimeout(slideShow, 1000);
    }
}

function nextSlide(){
    var showing = $('#slideshow .show');
    var next = showing.next().length ? showing.next() : showing.parent().children(':first');
    var timer;
    showing.fadeOut(500, function () {
        next.fadeIn(200).addClass('show');
    }).removeClass('show');
}

Demo: http://jsfiddle.net/DerekL/mqEbZ/

于 2013-03-13T04:07:10.980 に答える
0

Derek の回答に基づいて作業すると、ホバーの代わりにmouseenterandを使用することができますmouseleave。

動作中のスライドショー Jsfiddle を参照してください: Demo: http://jsfiddle.net/highwayoflife/6kDG7/

var hovering = false;
var slideshow = $("#slideshow");

slideshow.mouseenter(function() {
    hovering = true;
}).mouseleave(function() {
    hovering = false;
    slideShow();
});

function slideShow() {
    if (!hovering) {
        # Some browsers don't interpret "display:block" as being visible
        # If no images are deemed visible, choose the first...
        var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
        var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");

        currentImg.fadeOut(500, function() {
            nextImg.fadeIn(500, function() {
                setTimeout(slideShow, 2000);
            });
        });
    }
}
$(document).ready(function() {
    slideShow();
});
于 2013-03-13T05:21:33.363 に答える
0

そのためには2つの関数が必要だと思います...slideShow（）と他の1つはpauseSlideshow（）...今、mouseoutイベントでslideshow（）を呼び出し、mouseenterでpauseSlideShow（）を呼び出します

あなたのコードは次のようになります

$(document).ready(function(){

 $('.slider').mouseout( slideShow());
 $('.slider').mouseenter( pauseSlideShow());
 }); 
function slideShow() {
var showing = $('#slideshow .show');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
var timer;
showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show');    
timeOut = setTimeout(slideShow, 3000);        
}

function PauseSlideShow() {
window.clearTimeout(timeOut);
}

それを試してみてください

于 2013-03-13T04:09:27.567 に答える
0

それを使用.delay()すると役立ちます。

説明:タイマーを設定して、キュー内の後続のアイテムの実行を遅らせます。

于 2013-03-13T04:04:00.477 に答える