Question

-------------- JavaScript Code -------------
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 1000 );
}


$(function() {
    setInterval( "animate()", 6000 );

} );
---------------- The End of JScript Code ---------

我讨厌JScript，请帮忙！

------------------HTML Code ------------------------
<div id="slider">
<ul class="ppt">
    <li><img src="../Slider/Slika_1.jpg" alt="Projman 1"></img></li>
    <li><img src="../Slider/Slika_2.jpg" alt="Projman 2"></img></li>
    <li><img src="../Slider/Slika_3.jpg" alt="Projman 3"></img></li>
    <li><img src="../Slider/Slika_4.jpg" alt="Projman 4"></img></li>
    <li><img src="../Slider/Slika_5.jpg" alt="Projman 5"></img></li>
    <li><img src="../Slider/Slika_6.jpg" alt="Projman 6"></img></li>
</ul>
</div>

-------------------The End of HTML Code ----------------

我只需要制作一个悬停效果，当鼠标移开时将间隔设置为1000，并在鼠标移出时将其设置为正常，任何人？救命！问候！

Answer 1

我有一个working jsFiddle供您查看。

Jquery使用.hover()函数允许您暂停和重新启动悬停事件。

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
var nextSpeed = 6000;
var fadeSpeed = 1000;

function animate() {
    cur.fadeOut( fadeSpeed );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( fadeSpeed );
    timer = setTimeout(animate, nextSpeed);
}


$('#slider').hover(
    function() {
            if (nextSpeed != 1000) {
            if (timer) { 
                clearTimeout(timer); 
            }
            nextSpeed = 1000;
            fadeSpeed = 200;
            animate();
        }
    }, function() {
            nextSpeed = 6000;
            fadeSpeed = 1000;
    }
);

$(function() {
    animate();
} );

这可以让你到达你需要的地方。

修改更新了小提琴，以解释所述问题。悬停仍然是合适的选择。对不起，我没有花太多时间第一次去 - 现在应该好好工作。

Side Note - 有一些插件可以做得更好 - 可能想调查这些。

Answer 2

IMO接受的答案无效。

setInterval来电应使用animate作为参数，而不是animate()。
你不应该把鼠标处理放在图像上，因为当时图像隐藏，它计为mouseleave，因此尽管鼠标指针悬停在滑块上，下一个图像将再次变慢。
当您设置新的间隔时，您还需要清除之前的预定间隔。
当您切换到1000毫秒间隔时，您还需要降低淡入淡出时间间隔，因此它们适合1000毫秒。

这是my fiddle。它更长，但它解决了这些问题。

这是一个sliding variant。

如何在鼠标悬停时加速这个简单的jscript滑块中的图像？

2 个答案: