Jquery 带有下一个/上一个链接的简单循环幻灯片放映

我或多或少是Jquery的初学者，从一开始就是这样 我试着在一个幻灯片的基础上制作一个可点击的循环幻灯片。 到现在为止，一直都还不错。代码有效（见下文）。 我的问题是:

难道没有更简单的方法来编写代码吗。我在重复上一个和下一个的相同代码

当我点击下一个/上一个链接，动画开始时——在动画中我再次点击，有时图像会闪烁或出现错误。 有没有办法在动画对我的单击做出反应之前强制动画完成

Javascript:

    $(function() {

    $('#prev').click(function() {
        var $active = $('#slideshow IMG.active');
        var $prev = $active.prev();
        $active.addClass('last-active');

    if($active.is(":first-child")){$prev = $("IMG:last-child");}
        $prev.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            }); 

    }); 


    $('#next').click(function() {
        var $active = $('#slideshow IMG.active');
        var $next = $active.next();
        $active.addClass('last-active');

    if($active.is(":last-child")){$next = $("IMG:first-child");}
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            }); 

    }); 

    });

CSS:

HTML:

下一个
上

每当我遇到建造自行车的需要时，我都会利用自行车。这可能不是你优化问题的答案，但我认为每个人都应该看看Cycle插件

正如您所看到的，您也可以非常轻松地使用next/prev按钮。就像

$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});

您的HTML代码可以保持这种状态。

好了

1） 为“下一步”和“上一步”按钮添加相同的类，然后检查单击的按钮。
2） 添加。停止（0,1）以跳到动画的结尾

---

不过还是有一辆小马车……

非常酷，谢谢我想console.log只是用来测试的，对吗？-我不太清楚（0,1）在stop（）中代表什么，尽管我读到的第一个0表示动画队列没有被清除，所以如果触发10次动画，动画将执行10次（全长）。因此，如果您快速单击“下一步”按钮10次，您将不得不等待所有动画结束。第二个“1”用于停止正在播放的curent动画（实际完成curent动画）。因此，如果按10次“下一步”按钮，前9次动画将立即完成，并且仅显示最后一次动画。停止（0,1）是解决此重复动画问题的常用方法。请注意，使用停止（0,1），即使队列未被清除，也不会向队列添加动画，因为当您在播放动画时单击触发按钮，它将完成该动画并只执行此动画。谢谢！我知道循环插件。但是为了了解Jquery，我想自己构建它。我就是无法将cylce插件垂直和水平居中。插件代码中一定有什么东西，这使得它很难。。。

    <div id="slideshow">
        <img src="image1.jpg" class="active" />
        <img src="image2.jpg" />
        <img src="image3.jpg" />
        <img src="image4.jpg" />
    </div>
    <div id="next">NEXT</div>
    <div id="prev">PREV</div>

$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});