0

OK、スライドショーは機能していますが、マウスが画像をホバリングしているかどうかを判断する方法がわかりません。

Javascript:

<script type="text/javascript">     
    var hovering = false;
    $('#slideshow').hover(function () {   //not sure if #slideshow is the right thing to put here
        hovering = true;
    }, function () {
        hovering = false;
        slideShow();
    });

    $(document).ready(function(){
        slideShow();
    });
    function slideShow() {
        if(!hovering) {
            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);
        }
    }
</script>

HTML:

<div id="slideshow">
    <img class="show" src="../images/food/chicken_quesa.jpg">
    <img src="../images/food/beet_salad.jpg">
    <img src="../images/food/pasta_display.jpg">
</div>
4

2 に答える 2

1

このようにしてみてください：

$(document).ready(function() {

    var timer;

    $("#slideshow div").hide();

    $("#slideshow")
        // when mouse enters, clear the timer if it has been set
        .mouseenter(function() {
            if (timer) { clearInterval(timer) }
        })
        // when mouse goes out, start the slideshow
        .mouseleave(function() {
            timer = setInterval(function() {
                $("#slideshow > div:first")
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo("#slideshow");
            }, 3000);
        })
        // trigger mouseleave for initial slideshow starting
        .mouseleave();

});​
于 2013-03-13T05:41:33.920 に答える
0

それを使用mouseenter and mouseleaveします：

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

ドキュメントを読むMouse Enterと Mouse Leave

于 2013-03-13T05:34:22.310 に答える