0

我需要一些帮助来解决以下问题。我有这个

http://jsfiddle.net/WGkPV/1/

我想要 3 个 div 的显示，当我按下下一个 div 时将显示。（与之前相同）具有很好的滑动效果。谢谢

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
    <div>div 5</div>
    <div>div 6</div>
    <div>div 7</div>
    <div>div 8</div>
</div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

$(document).ready(function () {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    var first3 = $('.mydivs > div:lt(3)');
    var first = $('.mydivs > div:lt(1)');
    divs.hide();
    first3.show();
    $("button[name=next]").click(function (e) {

        divs.eq(now).hide();
        now = (now > 0) ? now + 1 : divs.length + 1;
        divs.eq(now).show(); // or .css('display','block');
        //console.log(divs.length, now);
    });
    $("button[name=prev]").click(function (e) {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // or .css('display','block');
        //console.log(divs.length, now);
    });
});

.mydivs {
    height:300px;
    border:5px solid #ccf;
    width:600px;
}
.mydivs>div {
    height:100%;
    width:195px;
    background-color:red;
    overflow-y:auto;
    border:5px solid #ff0;
    padding:1em;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    float:left;
    margin-left:5px;
}
4

0 回答 0