0

我试图在不使用插件的情况下使用 JQuery 实现幻灯片。我在一个列表中有三个 div，我希望每次单击下一个按钮时，当前 div 都会移出，下一个 div 会移入。不幸的是，当我单击下一个按钮时，列表中的所有三个 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 回答