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

Question

我或多或少是 Jquery 的初学者并开始使用它我尝试制作一个可点击的循环幻灯片，基于 this一。到目前为止，一切都很好。该代码有效(见下文)。我的问题:

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

2. 当我单击下一个/上一个链接并且动画开始时，在动画期间我再次单击，有时图像会闪烁或出现错误。有没有办法在动画对我的点击使用react之前强制动画完成。

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 PlugIn 。这可能不是您优化问题的答案，但我认为每个人都应该看一下 Cycle 插件。

如您所见 here on the demo page您也可以非常轻松地使用下一个/上一个按钮。就像

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

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