jquery滑块一次4张幻灯片

我有N个

我想让jqueryslider正常工作，这样每个幻灯片都包含4个

，其余的都隐藏在溢出中

我很想使用这个插件：

我的第一个直觉是创建另一个jquery插件，该插件将计算li并附加div。因此：

<div class="slide">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>
<div class="slide">
  <li></li>
</div>

但是这是肮脏的，并且在任何方面都不正确地将div放在

中

我想知道这是否是唯一的方法，而不是作为jquerypro，我想知道是否有更好的解决方案

提前谢谢

Chris Kempen

这看起来棒极了-谢谢你！ 但我没有什么问题：

您的代码：

<script type="text/javascript">
$(document).ready(function(){

    // get the container, useful for later too...
    var container = $("#prefooterslides");

    // get all available UL and LI elements...
    var li_elements = container.find("LI").clone();

    // remove the current content so that we can rebuild it for the slider...
    container.find("UL").remove();

    // build the slider container...
    var slide_container = $("<div />");
    slide_container.addClass("slide");

    // tricky part: looping through the LI's and building each of the slides...
    // first create some helpful variables...
    var li_elements_per_slide = 4;
    var li_counter = 0;
    // create the first slide, with a UL to hold the LI's...
    var current_li_div = $("<div />");
    current_li_div.append($("<ul />"));

    // loop through the LI's...
    li_elements.each(function(index, element){

        li_counter++;
        var current_li = $(element).clone();
        current_li_div.find("UL").append(current_li);

        if (li_counter % li_elements_per_slide == 0)
        {
            // we've hit 4 in this list, so add the slide and make
            // a new one, using same code as before...
            container.append(current_li_div);
            current_li_div = $("<div />");
            current_li_div.append($("<ul />"));
        }

    });

    // we might have an uneven number of LI's, so we need to check for this...
    if (li_counter % li_elements_per_slide != 0)
        container.append(current_li_div);

    // all that's left to do is to initialise the slider script...
    container.slides();

});
</script>

$（文档）.ready（函数（）{
//获取容器，对以后也很有用。。。
var容器=$（“#预ooterslides”）；
//获取所有可用的UL和LI元素。。。
var li_elements=container.find（“li”）.clone（）；
//删除当前内容，以便我们可以为滑块重建它。。。
container.find（“UL”）.remove（）；
//构建滑块容器。。。
var slide_container=$（“”）；
slide_container.addClass（“幻灯片”）；
//棘手的部分：通过李的循环和建立每个幻灯片。。。
//首先创建一些有用的变量。。。
var li_元素每张幻灯片=4；
var li_计数器=0；
//创建第一张幻灯片，用UL固定李的。。。
var current_li_div=$（“”）；
当前附加部分（$（“
”）；
//通过李的。。。
li_元素。每个（函数（索引，元素）{
li_计数器++；
var current_li=$（元素）.clone（）；
当前查找（UL）附加（当前查找）；
if（每个幻灯片的li\U计数器%li\U元素=0）
{
//我们在这个列表中找到了4个，所以添加幻灯片并制作
//一个新的，使用与以前相同的代码。。。
container.append（当前\u li\u div）；
当前_li_div=$（“”）；
当前附加部分（$（“
”）；
}
});
//我们可能有一个不均衡的李的数量，所以我们需要检查这个。。。
if（每张幻灯片的li\U计数器%li\U元素数！=0）
container.append（当前\u li\u div）；
//剩下要做的就是初始化滑块脚本。。。
容器。幻灯片（）；
});

我的html：

<ul id="prefooterslides">

<li>
    <h3><a href="#">SANGIORGIO RESORT</a></h3>
</li>

<li>
    <h3><a href="#">SANGIORGIO RESORT</a></h3>
</li>

<li>
    <h3><a href="#">SANGIORGIO RESORT</a></h3>
</li>

<li>
    <h3><a href="#">SANGIORGIO RESORT</a></h3>
</li>

<!-- end #prefooterslides --></ul>

结果是：

<ul id="prefooterslides">

    <li>
        <h3><a href="#">SANGIORGIO RESORT</a></h3>
    </li>

    <li>
        <h3><a href="#">SANGIORGIO RESORT</a></h3>
    </li>

    <li>
        <h3><a href="#">SANGIORGIO RESORT</a></h3>
    </li>

    <li>
        <h3><a href="#">SANGIORGIO RESORT</a></h3>
    </li>

<div>

    <ul>

        <li>
            <h3><a href="#">SANGIORGIO RESORT</a></h3>
        </li>

        <li>
            <h3><a href="#">SANGIORGIO RESORT</a></h3>
        </li>

        <li>
            <h3><a href="#">SANGIORGIO RESORT</a></h3>
        </li>

        <li>
            <h3><a href="#">SANGIORGIO RESORT</a></h3>
        </li>

    </ul>

</div>
</ul>

显而易见的事情：

container.find（“UL”）.remove（）；->container.find（“LI”）.remove（）

slide_container.addClass（“幻灯片”）；这不管用

在查看代码时，我意识到没有必要将所有内容都放在div中。但是使用simple

更适合于正确的标记

---

你能帮我解决这个问题吗？你为我写jquery已经太好了：）

所以你的问题变成了如何分割N个

LI

，然后用分割的

LI

初始化滑块？有趣的问题，通过jQuery的挖掘和重构，这是完全可能的

从

LI

的示例列表开始，如下所示：

<div id='main_container'>
    <ul>
        <li>Something something something</li>
        <li>Something something something</li>
        <li>Something something something</li>
        ...
        <li>Something something something</li>
    </ul>
</div>

<script type="text/javascript">
$(document).ready(function(){

    // get the container, useful for later too...
    var container = $("#main_container");

    // get all available UL and LI elements...
    var li_elements = container.find("LI").clone();

    // remove the current content so that we can rebuild it for the slider...
    container.find("UL").remove();

    // build the slider container...
    var slide_container = $("<div />");
    slide_container.addClass("slides_container");

    // tricky part: looping through the LI's and building each of the slides...
    // first create some helpful variables...
    var li_elements_per_slide = 4;
    var li_counter = 0;
    // create the first slide, with a UL to hold the LI's...
    var current_li_div = $("<div />");
    current_li_div.append($("<ul />"));

    // loop through the LI's...
    li_elements.each(function(index, element){

        li_counter++;
        var current_li = $(element).clone();
        current_li_div.find("UL").append(current_li);

        if (li_counter % li_elements_per_slide == 0)
        {
            // we've hit 4 in this list, so add the slide and make
            // a new one, using same code as before...
            container.append(current_li_div);
            current_li_div = $("<div />");
            current_li_div.append($("<ul />"));
        }

    });

    // we might have an uneven number of LI's, so we need to check for this...
    if (li_counter % li_elements_per_slide != 0)
        container.append(current_li_div);

    // all that's left to do is to initialise the slider script...
    container.slides();

});
</script>

一些东西
一些东西
一些东西
...
一些东西

…显然，您需要获取它们的列表，循环浏览它们，并以正确的格式将它们追加到主容器中，以便滑块拾取并初始化。我很想试试这样的东西：

<div id='main_container'>
    <ul>
        <li>Something something something</li>
        <li>Something something something</li>
        <li>Something something something</li>
        ...
        <li>Something something something</li>
    </ul>
</div>

<script type="text/javascript">
$(document).ready(function(){

    // get the container, useful for later too...
    var container = $("#main_container");

    // get all available UL and LI elements...
    var li_elements = container.find("LI").clone();

    // remove the current content so that we can rebuild it for the slider...
    container.find("UL").remove();

    // build the slider container...
    var slide_container = $("<div />");
    slide_container.addClass("slides_container");

    // tricky part: looping through the LI's and building each of the slides...
    // first create some helpful variables...
    var li_elements_per_slide = 4;
    var li_counter = 0;
    // create the first slide, with a UL to hold the LI's...
    var current_li_div = $("<div />");
    current_li_div.append($("<ul />"));

    // loop through the LI's...
    li_elements.each(function(index, element){

        li_counter++;
        var current_li = $(element).clone();
        current_li_div.find("UL").append(current_li);

        if (li_counter % li_elements_per_slide == 0)
        {
            // we've hit 4 in this list, so add the slide and make
            // a new one, using same code as before...
            container.append(current_li_div);
            current_li_div = $("<div />");
            current_li_div.append($("<ul />"));
        }

    });

    // we might have an uneven number of LI's, so we need to check for this...
    if (li_counter % li_elements_per_slide != 0)
        container.append(current_li_div);

    // all that's left to do is to initialise the slider script...
    container.slides();

});
</script>

$（文档）.ready（函数（）{
//获取容器，对以后也很有用。。。
变量容器=$（“#主容器”）；
//获取所有可用的UL和LI元素。。。
var li_elements=container.find（“li”）.clone（）；
//删除当前内容，以便我们可以为滑块重建它。。。
container.find（“UL”）.remove（）；
//构建滑块容器。。。
var slide_container=$（“”）；
slides_container.addClass（“slides_container”）；
//棘手的部分：通过李的循环和建立每个幻灯片。。。
//首先创建一些有用的变量。。。
var li_元素每张幻灯片=4；
var li_计数器=0；
//创建第一张幻灯片，用UL固定李的。。。
var current_li_div=$（“”）；
当前附加部分（$（“
”）；
//通过李的。。。
li_元素。每个（函数（索引，元素）{
li_计数器++；
var current_li=$（元素）.clone（）；
当前查找（UL）附加（当前查找）；
if（每个幻灯片的li\U计数器%li\U元素=0）
{
//我们在这个列表中找到了4个，所以添加幻灯片并制作
//一个新的，使用与以前相同的代码。。。
container.append（当前\u li\u div）；
当前_li_div=$（“”）；
当前附加部分（$（“
”）；
}
});
//我们可能有一个不均衡的李的数量，所以我们需要检查这个。。。
if（每张幻灯片的li\U计数器%li\U元素数！=0）
container.append（当前\u li\u div）；
//剩下要做的就是初始化滑块脚本。。。
容器。幻灯片（）；
});

这是假设您已经包含了“滑块”脚本。我试着尽可能多地发表评论并保持直截了当，所以我希望这会有所帮助！但如果你需要澄清，请告诉我！：）

编辑#1:

我已经包括了一个要看的。我已经复制/粘贴了我的代码，它似乎