Question

首先，我想说，我真的很红了很多类似的教程/指南和其他东西，但没有一个是有帮助的。我想制作尽可能简单的滑块，我认为我是一个很好的方法来做到这一点。在制作滑块时我遇到了两个问题，我不知道要解决这个问题。我在这里http://jsfiddle.net/FJrqS/1/

演示了我的问题

第一个问题是在页面加载时，滑块在向右滑动时会有某种滞后，几秒钟后都会恢复正常。我真的不知道是什么问题。

第二个问题是我不知道如何使这个滑块在悬停时停止，并且在鼠标移出时继续停止。

提前多多感谢

Answer 1

Hiya希望这是有用的演示： http://jsfiddle.net/FJrqS/38/

如果这有帮助，请告诉我。否则我会删除我的帖子。（如果你正在写一个完整的眼睛糖果风格的插件，你可以向你致敬:)）

1）滑动，因为您使用像素位置滑动leftpos是导致轻微缓慢的一个我做了一个小的改变，它似乎有点更好的行为然后以前，你可以玩。

2）您可以使用鼠标悬停和mouseout来启动和停止循环。（但是如果你编写插件，你可能会想要绑定很多其他事件）

对于悬停，您可以将.mouseover更改为.hover，但.mouseover应该可以解决问题。

下面的JQuery代码

$(document).ready(function(){

loop();
function loop(){
    var sliderRwidth = ($('#sliderR li').length)*200;
    var leftpos =(($('#sliderR li').length))-70; 
    var rightpos = (($('#sliderR li').length)*200)-1000; 
    var speed =  5000;

$("#sliderR").css('width',sliderRwidth+'px');

$("#sliderR").animate({'left':leftpos+'px'},speed
,function() {
$("#sliderR").animate({'left':-rightpos+'px'},speed
,function(){loop();

        })
    });



}
    //On mouseover stop the slider
    $("#sliderR").mouseover(function() { 
        $(this).stop();
        return false;
    }); 

     //On mouseout start the slider
     $("#sliderR").mouseout(function() { 
        loop();
    }); 

});

希望这有帮助，干杯！

jquery滑块在悬停时暂停

1 个答案: