文章/答案/技术大牛

发布

社区首页 >问答首页 >如何加快这个简单的jscript滑块在鼠标上的图像？

问如何加快这个简单的jscript滑块在鼠标上的图像？
EN

Stack Overflow用户

提问于 2014-01-12 11:18:35

回答 2查看 128关注 0票数 0

-------------- 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，当鼠标超过，当鼠标击穿正常时，有人吗？帮助!欢迎光临！

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-12 12:06:45

国际海事组织公认的答案是工作不正确。

setInterval调用应该使用animate作为参数，而不是animate()。
您不应该将鼠标处理放在图像上，因为当图像隐藏时，它就算作一个mouseleave，所以下一个图像将再次变慢，尽管鼠标指针在滑块上悬停。
当您设置一个新的间隔时，您还需要清除先前计划的间隔。
当你切换到1000毫秒的间隔时，你也需要降低fadeout的间隔，这样它们才能适应1000 as。

这是我的小提琴。它更长，但它解决了这些问题。

这是一个滑动变量。

票数 0

Stack Overflow用户

发布于 2014-01-12 11:42:48

我有一个工作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();
} );

这应该能帮你找到你该去的地方。

编辑更新了对所述问题的解释。悬停仍然是适当的选择。抱歉，我第一次没花太多时间--现在应该更好了。

附带说明--有些插件做得更好--可能会想要调查这些。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21073998

复制

相似问题

问如何加快这个简单的jscript滑块在鼠标上的图像？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何加快这个简单的jscript滑块在鼠标上的图像？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何加快这个简单的jscript滑块在鼠标上的图像？
EN