1

私はJavaScriptにかなり慣れていません。私は必要なものと同様のことをすることがわかったいくつかのスクリプトを適応させましたが、それも私が望むようには機能しません。長い説明で申し訳ありません。

ボタン 1 ～ 3 は左の div を担当し、ボタン 4 ～ 6 は右の div を担当します。

スクリプトを実行すると、どの div も表示されません。

buttons#1 がクリックされると、div#1 が左からスライドし、コンテナーの左から独自の幅で配置されます。ボタン#2 とボタン#3 に対応する div#2 と div#3 も同様です。一度に表示できる div は 1 つだけなので、button#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>
4

1 に答える 1

1

jsfiddle.net/KFqvf

これは、あなたが欲しいと思うものを備えたjsfiddleです。左右にスライドするための単純なjqueryアニメーション機能と、アイテムを選択するための単純なメニューが必要です!

お役に立てれば

于 2012-06-14T18:40:34.737 に答える