为什么我的图像滑块不起作用？

Question

我正在创建一个图像滑块，但滑块始终显示相同的图像。

这是我制作的Jquery代码

$(document).ready(function(){

slide();

});
var next = 1;
var num = $('#slider img').size();
function slide(){

$('.'+next).show("slide",{direction:"right"},500);
setTimeout(function(){
    $('.'+next).hide("slide",{direction:"left"},500);
    slide();
    if(next == num){
        next = 1;
    }else{
        next = next+1;
    }

},2000);

}

这是滑块html

<div id="slider">
    <img  class="1" src="img/1.jpg"  alt="1">
    <img  class="2" src="img/2.jpg"  alt="2">
    <img  class="3" src="img/3.jpg"  alt="3">
</div>

请参阅live demo

有人可以帮忙解决这个问题吗？

Answer 1

我刚刚调整了您的Fiddle

进行调整

setTimeout(function () {
    $('.' + next).hide("slide", {
        direction: "left"
    }, 500);

    if (next == num) {
        next = 1;
    } else {
        next +=  1;
    }
    return slide(next);
}, 2000);

而不是

setTimeout(function () {
    $('.' + next).hide("slide", {
        direction: "left"
    }, 500);
    slide();
    if (next == num) {
        next = 1;
    } else {
        next +=  1;
    }
 }, 2000);

因此将使用下一张图片调用slide()。