Question

我打算構建一個具有多個框的小滑塊。我有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'); 

} 

Answer 1

我會做這樣的事情：

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類，因爲它不會在我的代碼需要。