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类，因为我的代码中不需要它。

Javascript滑块无效

1 个答案: