jQuery滚动/旋转木马

我希望使用jQuery创建一个旋转木马或滚动，到目前为止，我已经尝试实现jcarousel，但没有成功，我希望实现以下目标：

基本上我想显示一个6个项目的列表，然后滚动到下一个6，然后滚动到下一个6或返回到前一个6，列表中不必有6个，但每6个产品应该有一个新的阶段滚动

我的标记看起来像这样

HTML

<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a class="arrows">Prev</a>
        <a class="arrows next">Next</a>

---

然而，jCarousel只是在同一行上创建了所有的li，我需要每行2个，3行，然后创建一个新的部分，我也可以滚动，我该怎么做呢？

我对3行5列做了同样的事情，下面是我如何做的，以使它们坚持这种配置：

父列的宽度=5*列的宽度

父行的高度=3*行的宽度

---

当然，别忘了计算填充和边距，但基本上我总是确保任何物体在宽度和高度上都不会有更多的空间，然后它们只是把自己布置成一个旋转木马。就我个人而言，我不使用库，只是计算父对象的宽度，然后将其左侧位置更改为位置宽度，其仅显示以下项目。如果您愿意，如果您不明白我的意思，我可以添加一个示例代码

您应该使每个

li

成为一组六个元素的容器，即

div

s。（我相信jcarousel使用了它在您指定的容器下找到的所有

li

元素..）

所以

Html

<div class="container">
    <div class="products">
        <ul>
            <li>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </li>
            <li>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
            </li>
        </ul>
    </div>    
    <a class="arrows jcarousel-prev" id="prev">Prev</a>
    <a class="arrows next jcarousel-next" id="next">Next</a>
</div>

jQuery

jQuery(".products").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null

});

function mycarousel_initCallback(carousel) {

    jQuery('.jcarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('.jcarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
}

---

演示在

我认为您可能必须手动将每组（六个）排列到一个容器中，然后使用jCarousel滚动容器对象。

.container{position:relative;width:424px}
.products{width:258px;overflow:hidden;margin:0px auto;position:relative}
.products ul { width:258px; margin:0px auto; text-align:center;}
.products ul li{width:258px;overflow:hidden;}
.products ul li div{ width:95px; height:137px; float:left; margin-right:32px; margin-bottom:57px; border:1px solid red; text-align:left; }
.jcarousel-prev, .jcarousel-next { position:absolute; top:0px; left:0px; width:83px; height:80px; background:url(/media/images/prev-horizontal.png) no-repeat top left; }
.jcarousel-next { top:0; right:0; left:auto;background:url(/media/images/horizontal-next.png) no-repeat top left;}

jQuery(".products").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null

});

function mycarousel_initCallback(carousel) {

    jQuery('.jcarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('.jcarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
}