永远的丫丫

导航

淡入淡出效果实现。

  $(".slider-container:first-child", ".sliders").addClass("current").fadeIn(300);
            $(".next-button").click(function () {
                var current = $(".slider-container.current", ".sliders").removeClass("current").fadeOut(300);
                current.fadeOut(300, function () {
                    var next = current.next();
                    if (next.length == 0) {
                        $(".slider-container:first-child", ".sliders").addClass("current").fadeIn(300);
                    } else {
                        next.addClass("current").fadeIn(200);
                    }
                });
            });

            $(".prev-button").click(function () {
                var current = $(".slider-container.current", ".sliders").removeClass("current").fadeOut(300);
                current.fadeOut(300, function () {
                    var prev = current.prev();
                    if (prev.length == 0)
                    { $(".slider-container:last-child", ".sliders").addClass("current").fadeIn(300); }
                    else {
                        prev.addClass("current").fadeIn(200);
                    }
                })
            })

<div class="slider-container">

<div class="sliders">

<div class="slider">

aaaaaaa

</div >

<div class="slider">

bbbbbb

</div >

<div class="slider">

cccccc

</div >

</div>

</div>

posted on 2012-05-21 21:42  永远的丫丫  阅读(102)  评论(0编辑  收藏  举报