jquery - 迷你幻灯片代码适配

Question

我有这个 HTML 标记：

<div id="leftBtn">Left</div>
<div id="rightBtn">Right</div>

<div id="wrapper">
    <div id="slideshowContainer">
        <div id="slide_1" class="slide"></div>
        <div id="slide_2" class="slide"></div>
        <div id="slide_3" class="slide"></div>
        <div id="slide_4" class="slide"></div>
    </div>
</div>

...它对应于一个超级简单的幻灯片（代码的所有学分都归功于 jimjimmy1995）。现在它向左/向右滑动。单击右/左按钮时，我需要幻灯片重叠/分离和动画不透明度，而不是水平滑动。这就是我所拥有的 -小提琴。我不是 jQuery 精通者，所以我需要帮助来更改代码 - 随意更改它。谢谢你。

佩德罗

Answer 1

由于时间不足，有些东西又快又脏 :) 不确定我是否清楚地了解您的要求。利用 jquery .animate API 来放置一些动画。

注意：您需要检查第一个和最后一个项目才能循环浏览幻灯片。

http://jsfiddle.net/ZkyZx/7/

变化的是幻灯片功能：

function slideShow_animate(){
    $('.slide.active').removeClass('active').stop().animate({
        opacity : 0
    }, 500, function() {
        $(this).next('.slide').addClass('active').stop().animate({
            opacity : 1
        }, 500);
    });
}

Answer 2

无需编写自己的滑块，您可以快速查看nivo-slider，它从一开始就包含一系列很酷的过渡，并且实现相当简单。

祝你好运 ：）