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());

});

使用Prev＆amp ;;滑动DIV列表下一步按钮

1 个答案: