Question

我或多或少是Jquery的初学者，并从它开始我尝试根据this制作一个可点击的循环播放幻灯片。到现在为止还挺好。代码有效（见下文）。我的问题：

是否有更简单的方法来编写代码。我有点为prev和next重复相同的代码。
当我点击下一个/上一个链接并开始动画时 - 在动画中我再次点击，然后有时图像闪烁或出现错误。有没有办法强制动画完成，然后才能对我的点击作出反应。

使用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，您也可以非常轻松地使用next / prev按钮。就像

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

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

Answer 2

http://jsfiddle.net/kPD4n/

你去。

1）为“NEXT”和“PREV”按钮添加相同的类，然后检查单击的按钮。
2）添加.stop（0,1）以跳转到动画结束。

虽然还有点小马车......

带有next / prev链接的简单循环幻灯片

2 个答案: