非常簡單的jQuery Div Slider

Question

我想將5個div放在我的頁面上，但頁面的寬度不會讓我這樣做。所以我想我只能展示其中的3個，而想看其他展示的人可以點擊左右箭頭查看。我希望它以這種方式工作非常簡單。任何人都有最好的方法來做到這一點？

Answer 1

不會是你很難在所有的代碼，所以理論上是這樣的

HTML結構

.outter-container 
    .inner container 
    .slide slide1 
    .slide slide2 
    .slide slide3 
    .slide slide4 
    .slide slideX 

1. 得到窗口寬度，滑動寬度
2. 窗寬/ 3 =滑動寬度（使其更容易，一次總是3張幻燈片）
3. 索引每張幻燈片，比應用索引*幻燈片寬度（這等於水平位置）
4. 設置外部容器爲相對位置，寬度=窗口寬度，overflow = hidden，內部容器爲絕對位置，左邊：0，頂部爲0，幻燈片爲位置：絕對
5. 設置每個幻燈片css left：index *寬度（點3）
6. 你去那裏，成功地隱藏其他幻燈片，時間相互作用
7. next.click - >滑動動畫內部容器左： - = slide.width（相對來說left.click）
8. 並且如果內部容器剩餘= 0，則顯示/隱藏左/右按鈕否則...當不再隱藏幻燈片時禁用人員點擊

Answer 2

以下是如何操作，通過使用jQuery.DIYslider，輕量級和可定製的jQuery滑塊。

示範下面的代碼的：http://jsfiddle.net/bj4yZ/155/

你會發現這個插件使得它非常容易做任何你想做的事情。

你會在上面鏈接的頁面上找到所有這個插件的選項，方法和事件。

HTML

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button> 

<div class="slider"><!-- The slider --> 
    <div><!-- A mandatory div used by the slider --> 
     <!-- Each div below is considered a slide --> 
     <div class="a">Div #1</div> 
     <div class="b">Div #2</div> 
     <div class="c">Div #3</div> 
     <div class="d">Div #4</div> 
     <div class="e">Div #5</div> 
    </div> 
</div> 

的JavaScript

$(".slider").diyslider({ 
    width: "400px", // width of the slider 
    height: "200px", // height of the slider 
    display: 3, // number of slides you want it to display at once 
    loop: false // disable looping on slides 
}); // this is all you need! 

// use buttons to change slide 
$("#go-left").bind("click", function(){ 
    // Go to the previous slide 
    $(".slider").diyslider("move", "back"); 
}); 
$("#go-right").bind("click", function(){ 
    // Go to the previous slide 
    $(".slider").diyslider("move", "forth"); 
});