Javascript jQuery水平滚动动画不工作

我在jquery水平滚动动画中遇到问题。我正在呈现数据库中的所有列表数据。它应该只有4项始终可见。但在卷轴上不显示隐藏项，也不显示4项。并且在单次滚动后滚动停止，我希望它滚动到列表的末尾。如何解决请

[Style]

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    width: 500px;
}

.scroller {
    border: 1px solid #f00;
    height: 100px;
    width: auto;
    overflow: hidden;
}

    .scroller li {
        float: left;
    }

    .scroller li {
        width: 24.5%;
        height: 100%;
        text-align: center;
        border: 1px solid #444;
    }

.item {
    background: green;
    position: relative;
}

<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

$(document).ready(function () {
    var $item = $('li.item'),
    visible = 4,
    index = 0,
    endIndex = ($item.length / visible) - 1;
    $('#next').click(function () {
        if (index < endIndex) {
            index++;
            $item.animate({ 'left': '-=100px' });
        }
    });
    $('#prev').click(function () {
        if (index > 0) {
            index--;
            $item.animate({ 'left': '+=100px' });
        }
    });
});

[html]

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    width: 500px;
}

.scroller {
    border: 1px solid #f00;
    height: 100px;
    width: auto;
    overflow: hidden;
}

    .scroller li {
        float: left;
    }

    .scroller li {
        width: 24.5%;
        height: 100%;
        text-align: center;
        border: 1px solid #444;
    }

.item {
    background: green;
    position: relative;
}

<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

$(document).ready(function () {
    var $item = $('li.item'),
    visible = 4,
    index = 0,
    endIndex = ($item.length / visible) - 1;
    $('#next').click(function () {
        if (index < endIndex) {
            index++;
            $item.animate({ 'left': '-=100px' });
        }
    });
    $('#prev').click(function () {
        if (index > 0) {
            index--;
            $item.animate({ 'left': '+=100px' });
        }
    });
});

1
2
3
4
5
6

[jquery]

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    width: 500px;
}

.scroller {
    border: 1px solid #f00;
    height: 100px;
    width: auto;
    overflow: hidden;
}

    .scroller li {
        float: left;
    }

    .scroller li {
        width: 24.5%;
        height: 100%;
        text-align: center;
        border: 1px solid #444;
    }

.item {
    background: green;
    position: relative;
}

<div id="content">
    <ul class="scroller">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
    <a href="javascript:void(0);" id="prev">&laquo;</a>
    <a href="javascript:void(0);" id="next">&raquo;</a>
</div>

$(document).ready(function () {
    var $item = $('li.item'),
    visible = 4,
    index = 0,
    endIndex = ($item.length / visible) - 1;
    $('#next').click(function () {
        if (index < endIndex) {
            index++;
            $item.animate({ 'left': '-=100px' });
        }
    });
    $('#prev').click(function () {
        if (index > 0) {
            index--;
            $item.animate({ 'left': '+=100px' });
        }
    });
});

$（文档）.ready（函数（）{
变量$item=$（'li.item'），
可见=4，
指数=0，
endIndex=（$item.length/visible）-1；
$（“#下一步”）。单击（函数（）{
如果（索引0）{
索引--；
$item.animate（{'left'：'+=100px'}）；
}
});
});

试试这个片段。 我只是稍微改变了你的css和代码

$（文档）.ready（函数（）{
变量$item=$（'li.item'），
可见=4，
指数=0，
endIndex=（$item.length-可见）-1；
$（'content'）.css（'width'，visible*100+'px'）；
$（“#下一步”）。单击（函数（）{
如果（索引0）{
索引--；
$item.animate（{'left'：'+=100px'}）；
}
});
});
*{margin:0；padding:0；列表样式：none；}
#内容{宽度：500px；}
.scroller{边框：1px实心#f00；高度：100px；宽度：自动；溢出：隐藏；显示：-webkit-box；}
.项目{
背景：绿色；
位置：相对位置；
浮动：左；
宽度：98px；
身高：100%；
文本对齐：居中；
边框：1px实心#444；}


1
2
3
4
5
6
7
8
9
10

Gr8！它的滚动非常完美，但我有一个问题，如果我使用项目宽度为25%，而不是100px，它没有正确定位项目，我如何解决它？我认为var visible不能正常工作，因为如果我更改visible 3，它应该呈现3个项目，但它没有这样做that@babymachinery我添加了使
var可见的功能
呈现那么多项目。。再试一次。至于
宽度：25%
这样会更棘手，因为您每次必须显示4个项目。这样想：如果你有一个包含5个可见项的框，并且每个项显示25%的宽度，该怎么办。。那不行。因为25%会给你1/4的div大小，所以它会呈现4个项目。。。您最好使用固定大小，但如果必须，您可以动态计算可见项并动态更改css。Thanx！兄弟，你为我努力工作。一切都很好地工作，但面临另一个问题，那就是当我从数据库中动态渲染项目时，如果在4之后单击“下一步”，它将不会渲染5,6 7。。。所以就这样空白。但是如果我手动测试它，那么它的gr8是什么问题？please@babymachinery当然可以。每次从数据库加载时，必须重新呈现项长度，才能使其正常工作。因此，将数据库中的新结果附加到HTML后，运行以下行：
$item=$（'li.item'）
。如果我的答案对你有帮助，如果你选择它作为这个职位的答案，我将不胜感激。谢谢我不知道该把这条线放在哪里？谢谢@卡斯滕·洛夫·安徒生。。。