Question

晚上好，我在这里准备了jsfiddle Demo http://jsfiddle.net/Z6Y95/1/

这是html：

<ul>
<li><a href="#" class="stop" id="dev" >a1</a></li>
<li><a href="#" class="stop" id="facebook" > a2</a></li>
<li><a href="#" class="stop" id="seo">a3</a></li>
<li><a href="#" class="stop" id="support">a4</a></li></ul>
<div id="serviceimg" class="serviceimg">
<div class="hide" name="dev" style="background:red;color:#fff;">a1</div>
<div class="hide" name="facebook" style="background:red;color:#fff;">a2</div>
<div class="hide" name="seo" style="background:red;color:#fff;">a3</div>
<div class="hide" name="support" style="background:red;color:#fff;">a4</div>
</div>

这是一个工作的jquery div滑块，但是我需要将它暂停在href鼠标上并显示与此a相关联的特定div。在鼠标输出时它必须继续div滑动但在我的情况下鼠标输出我暂停几秒没有显示div。如何在鼠标滑动时启动div滑动？

谢谢你！

Answer 1

这是更新的JS代码：

$('.serviceimg div').hide(); // hide all slides
    $('.serviceimg div:first-child').show(); // show first slide

    var prop;



    prop = setInterval(function () {
        $('.serviceimg div:first-child').hide()
            .next('div').show()
            .end().appendTo('.serviceimg');
    }, 3000);

    $('div').hover(function () {

        clearInterval(prop);

    }, function () {
        console.log('out');
        prop = setInterval(function () {
            $('.serviceimg div:first-child').hide()
                .next('div').show()
                .end().appendTo('.serviceimg');
        }, 3000);
        return false;
    });

<强> DEMO

SetInterval非常危险＆＃34;因为它可以在你悬停时叠加。我使用return false来阻止这种情况。

.hover函数最适合您的情况。您可以阅读更多相关信息 here 。

如何在鼠标悬停时暂停Jquery div滑块并在mouseout上重新启动它

1 个答案: