0

プラグインを使用せずに JQuery を使用してスライドショーを実装しようとしていました。1 つのリストに 3 つの div があり、次のボタンをクリックするたびに、現在の div が移動し、次の div が移動します。残念ながら、次のボタンをクリックすると、リスト内の 3 つの div がすべて移動しました。誰かがそれを理解するのを手伝ってくれますか? 現在の div を追跡するためにループが必要な場合があることはわかっていますが、多くのことを試しましたが、適切な解決策を見つけることができませんでした。私はあなたからの助けに感謝します！

これが私のhtmlコードです：

<body>
<div id="container">
    <ul>
        <li><div>Lucy</div></li>
        <li><div>Karolin</div></li>
        <li><div>Ashley</div></li>
    </ul>
</div>

<div id="button"><img src="next.png" /></div>

これは私のCSSコードです:

<style>
*{margin:0;padding:0;}

#container{
    height:200px;
    width:200px;
    overflow:hidden;
    margin-left:5%;
    margin-right:5%;
    margin-top:5%;
}

ul li {
    float:left;
    list-style:none;
    position:relative;
}

ul li div {
    float:left;
    height:200px;
    width:200px;
    background-color:yellow;
    position:relative;
}

#button {
    position:absolute;
    margin-top:10%;
}

これは私のJQueryコードです:

<script>
$(document).ready(function(){
    var currentDiv = $('ul li div');
    var currentWidth = currentDiv.height();
    var totalWidth = currentDiv.length * currentWidth;
    $('ul').css({
        width: function(){
            return totalWidth;
        }
    });

    $('#button').click(function(){
        $(currentDiv).animate({
            "margin-left":(-1*currentWidth)}, 1000)
    });


});

どうもありがとうございました！

4

1 に答える 1

0

すべてがアニメーション化されている理由は、セレクターが

var currentDiv = $('ul li div');

移動しようとしているインデックスを分離するために何かをする必要があります。多分何かのような

var currentDiv = $('ul li div').eq(1);

インデックス 1 の div を移動するため

于 2013-07-22T20:52:59.783 に答える