Question

我试图在不使用插件的情况下使用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)
    });


});

非常感谢！

Answer 1

所有动画都是因为你的选择器

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

您需要做一些事情来隔离您要移动的索引。也许像是

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

用于在索引1上移动div

没有插件的列表中的JQuery Div幻灯片

1 个答案: