滑動上一頁和下一頁按鈕

Question

資料覈實的名單我想有一組div的

<div><img src="img/car.jpg" /></div> 
<div><img src="img/boat.jpg" /></div> 
<div><img src="img/truck.jpg" /></div> 

我有大約20 div的所有浮動左邊的下一個和上一個按鈕。有沒有用前後兩個按鈕前後滑動？

Answer 1

我已經在過去https://stackoverflow.com/a/8747305/297641

回答了類似的問題，所以我編輯的代碼一點點與你有什麼工作，

DEMO

HTML：

<div class="prev">Previous</div> 
<div class="nav-wrapper clearfix"> 
    <div>Car</div> 
    <div>Boat</div> 
    <div>Truck</div> 
    <div>Van</div> 
    <div>Bi-Cycle</div> 
    <div>Omni</div> 
    <div>Race Car</div> 
</div> 
<div class="next">Next</div> 

JS：

var stPt = 0, elToShow = 5; //showing 5 elements 

var $nav_wrapper = $('.nav-wrapper'); 
var $list = $nav_wrapper.find('div'); //get the list of div's 
var $copy_list = []; 
var copy_lgt = $list.length - elToShow; 

//call to set thumbnails based on what is set 
initNav(); 
function initNav() { 
    var tmp; 
    for (var i = elToShow; i < $list.length; i++) { 
     tmp = $list.eq(i); 
     $copy_list.push(tmp.clone()); 
     tmp.remove(); 
    } 
} 

$('.next').click (function() { 
    $list = $nav_wrapper.find('div'); //get the list of div's 

    //move the 1st element clone to the last position in copy_list 
    $copy_list.splice(copy_lgt, 0, $list.eq(0).clone()); //array.splice(index,howmany,element1,.....,elementX) 

    //kill the 1st element in the div 
    $list.eq(0).remove(); 

    //add to the last 
    $nav_wrapper.append($copy_list.shift()); 
}); 

$('.prev').click (function() { 
    $list = $nav_wrapper.find('div'); //get the list of li's 

    //move the 1st element clone to the last position in copy_li 
    $copy_list.splice(0, 0, $list.eq(elToShow-1).clone()); //array.splice(index,howmany,element1,.....,elementX) 

    //kill the 1st element in the UL 
    $list.eq(elToShow-1).remove(); 

    //add to the last 
    $nav_wrapper.prepend($copy_list.pop()); 

});