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的所有信用）。现在它向左/向右滑动。单击右/左按钮时，我需要幻灯片重叠/分离并为不透明度设置动画，而不是水平滑动。这是我得到的 - Fiddle。我不是一个精通jQuery的人，所以我需要帮助改变代码 - 随意改变它。谢谢。

佩德罗

Answer 1

您可以快速查看nivo-slider，而不是编写自己的滑块，它可以从一开始就有一些很酷的过渡，并且实现起来相当简单。

祝你好运：）

Answer 2

快速和快速的东西由于时间不足而变脏:)不确定我是否明白了你的要求。使用jquery .animate API来放置一些动画。

注意：你需要先检查一下＆amp;最后一项，以循环播放幻灯片。

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);
    });
}

迷你幻灯片代码改编

2 个答案: