Jquery 向上滑动 div

Question

我需要一些帮助，我正在尝试创建一个非常简单的 jquery slider 。当我单击按钮时，我希望四个 div 向上滑动。但我不知道如何做到这一点。这是我在 jsfiddle.net 中的内容:http://jsfiddle.net/liveandream/LFAMW/

这是我的代码:

<div id="slider">
<div class="slide1" style="background: red"></div>
<div class="slide2" style="background: green"></div>
<div class="slide3" style="background: black"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>​

JQUERY:

$("#next").click(function(){
    $(".slide1").slideUp();
});​

但我需要它们在下一次和上一次单击时自动滑动到下一个 div。请提供任何帮助，我们将不胜感激!

Answer 1

您是否正在尝试类似 this 的内容？

HTML:

<div id="slider">
<div class="slide" style="background: red"></div>
<div class="slide" style="background: green;display: none;"></div>
<div class="slide" style="background: black; display: none;"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

Javascript:

$("#next").click(function(){
    var $next = $(".slide:visible").slideUp().next('.slide');
    if($next.size() < 1) {
        $next = $(".slide:first");
    }
    $next.slideDown();
});

$("#prev").click(function(){
    var $prev = $(".slide:visible").slideUp().prev('.slide');
    if($prev.size() < 1) {
        $prev = $(".slide:last");
    }
    $prev.slideDown();
});

CSS:

.slide {
width: 300px;
height: 300px;

}
#slider{
width: 300px;
height: 300px;
}