1

我正在尝试构建一个具有多个框的小滑块。我有 8 个（例如），我需要一次显示 4 个。它们就像我想向上滑动的小横幅。

到目前为止，这是我的代码：

HTML：

<div id="boxes">
    <div class="current">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class='box hide'>5</div>
    <div class='box hide'>6</div>
    ...
</div>

CSS：

#boxes div{
    width:400px;
    height:60px;
    background-color: red;
    color:white;
    margin: 20px 0;
}

.hide{display:none;}

Javascript：

$(function(){
    setInterval(show_boxes, 2000);
})

function show_boxes(){

     var curBox = $("#boxes div.current");
     var nxtBox = curBox.next();

     if(nxtBox.length == 0){
         nxtBox =  $("#boxes div:first");
     }

     curBox.removeClass('current').addClass('hide');
     nxtBox.addClass('current').removeClass('hide');

}
4

1 回答 1

2

我会这样做：

function show_boxes() {
    // cache the boxes wrapper (for performance)
    var $boxes = $('#boxes');
    // fetch the box we want to hide, which is on top of the list
    var $toHide = $boxes.find('div:first');
    // add it to the end of the list
    $boxes.append($toHide);
    // hide it
    $toHide.addClass('hide');
    // show the next box, which is now always the first hidden one
    $boxes.find('.hide:first').removeClass('hide');
}

请注意，我每次都将顶部框移到列表的末尾。这样，您将获得一个很好的无限循环，并且您不必进行复杂的检查来查看下一个要显示的框，以及下一个要隐藏的框。

一个演示：http: //jsfiddle.net/XzmAT/2/

我还删除了current该类，因为我的代码中不需要它。

于 2013-07-09T19:10:56.360 回答