Question

我正在寻找使用jQuery创建旋转木马或滚动，到目前为止，我试图实现jcarousel无济于事，我希望实现以下目标，

enter image description here

基本上我想要显示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>

CSS

.products ul { width:258px; margin:0px auto; overflow:hidden; text-align:center; }
.products ul li { 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:0px; left:329px; background:url(/media/images/horizontal-next.png) no-repeat top left;}

然而，jCarousel只是在同一行创建所有li，我需要每行2行3行，然后创建一个我可以滚动的新部分，我将如何进行此操作？

Answer 1

你应该让每个li成为一组六个元素的容器，这些元素将是div个。（我相信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>

<强>的CSS

.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

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;
    });
}

http://jsfiddle.net/gaby/NRKZK/

演示

Answer 2

我用3行5列做同样的事情，这是我如何做到这一点，以便他们坚持这个配置：

width_of_parentul = 5 * width_of_column

height_of_parentul = 3 * width_of_rows

不要忘记计算填充和边距当然，但基本上我总是确保高度宽度的任何对象都没有更多的空间，然后他们只是安排自己看起来像一个旋转木马。我个人不使用库，只计算父级的宽度，然后将其左侧位置更改为位置宽度，它只显示以下项目。如果你愿意，如果你没有看到我的意思，我可以添加一个示例代码

jQuery滚动/轮播

2 个答案: