同时在页面视图中滑入div

Question

我是javascript的新手。我已经调整了一些脚本，我发现它做了类似于我需要的东西，但它不起作用，因为我也喜欢它。我为长篇解释道歉。

我有6个按钮，按钮1 -3负责左侧div，按钮4 - 6负责右侧div。

当脚本运行时，不应该看到任何div。

单击按钮＃1时，div＃1从左侧滑出，然后从容器左侧定位自己的宽度。对于对应于按钮＃2和按钮＃3的div＃2和div＃3，这是相同的。一次只能看到1个div，因此按钮＃2将隐藏div＃1和div＃3并显示div＃2等。所有其他按钮都一样。

单击按钮＃4时，div＃4从右侧滑出，并从容器右侧定位自己的宽度。单击另一个按钮时隐藏div将与上面相同，一次只能看到1个div。

非常感谢帮助。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">




$(window).load(function(){

   $('.button-left').click(function() {
    var index = $(this).index(".button-left");
    var $box = $(".box-left:eq(" + index + ")");

    $(".box-left").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '25%',
        }, 500);
    }
});

    $('.button-right').click(function() {
    var index = $(this).index(".button-right");
    var $box = $(".box-right:eq(" + index + ")");

    $(".box-right").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '105%',
        }, 500);
    }
});
});




</script>
<style type="text/css">
#container {
    position: absolute;
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    padding: 0px;
    width:1024px;
    height:568px;
    overflow: hidden;
    background-color:#999999;
}

.box-left {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

.box-right {
    position: absolute;
    width: 200px;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    top: 100px;
    margin-left: -25%;

}

#box1 {
    background-color: green;
    left:260px;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
    right:0px;
}

#box5 {
    background-color: purple;
}

#box6 {
    background-color: brown;
}
</style>



<div class="button-left"><a href="#">Click Box #1</a> </div>
<div class="button-left"><a href="#">Click Box #2</a> </div>
<div class="button-left"><a href="#">Click Box #3</a> </div>

<div class="button-right"><a href="#">Click Box #4</a> </div>
<div class="button-right"><a href="#">Click Box #5</a> </div>
<div class="button-right"><a href="#">Click Box #6</a> </div>


<div id="container">

    <div id="box1" class="box-left">Box #1</div>
    <div id="box2" class="box-left">Box #2</div>
    <div id="box3" class="box-left">Box #3</div>
    <div id="box4" class="box-right">Box #4</div>
    <div id="box5" class="box-right">Box #5</div>
    <div id="box6" class="box-right">Box #6</div>

</div>

Answer 1

jsfiddle.net/KFqvf

这是我想你想要的东西。只需要简单的jquery动画功能左右滑动，以及一个简单的菜单来选择项目！

希望这有帮助