jquery上滑div

Question

我需要一些幫助，我想創建一個非常簡單的jquery滑塊..我想要四個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; 
} 

Answer 2

試試這個：

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

JS：

$("#next").click(function(){ 
    $(".current").slideUp(); 
    $('.current').removeClass('current').next('.slide').addClass('current'); 

});​ 

你需要添加一些邏輯上一個按鈕，並確定當你在最後一個或第一個div

Answer 3

你可以用標記類標記div並用jQuery移動標記，例如

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

---

$("#next").click(function(){ 
    $(".current").slideUp(function() { 
     $(this) 
      .removeClass('current') 
      .next('.slide') 
      .addClass('current'); 
    }); 
});​ 

jsfiddle here

Answer 4

這裏充滿幻燈片一個和下一個解決方案使用jQuery：

$(document).ready(function() { 
$("#next").click(function() { 
    if ($('.current').next('.slide').length > 0) { 
     $(".current").slideUp(); 
     $('.current').removeClass('current').next('.slide').addClass('current'); 
    } 

}); 
$("#prev").click(function() { 
    if ($('.current').prev('.slide').length > 0) { 
     $('.current').removeClass('current').prev('.slide').addClass('current'); 
     $(".current").slideDown(); 
    } 

}); 

}）;

我已經創建了該解決方案的箱上http://codebins.com/codes/home/4ldqpc9