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

Question

我或多或少是Jquery的初学者，并从它开始我试图根据这个制作一个可点击的循环幻灯片。目前为止，一切都好。代码有效（见下文）。我的问题：

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

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

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：

    #slideshow {position:relative; height:350px; opacity:1.0;}
    #slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
    #slideshow IMG.active {z-index:10; opacity:1.0;}
    #slideshow IMG.last-active {z-index:9;}
    #next {color:#0000ff; cursor:pointer;}
    #prev {color:#0000ff; cursor:pointer;}

.HTML：

    <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>

Answer 1

每次我遇到构建一些循环东西的需要时，我都会使用 jQuery 循环插件。这可能不是您优化问题的答案，但我认为每个人都应该看看 Cycle 插件。

正如您在演示页面上看到的那样，您也可以非常轻松地使用下一个/上一个按钮。就像

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

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

Answer 2

http://jsfiddle.net/kPD4n/

给你。

1）为"下一步"和"上一页"按钮添加相同的类，然后检查单击了哪个。
2） 新增 .stop（0,1） 跳转到动画结尾。

虽然还是有点越野车...