Question

我有N个<li>的

我想让jquery滑块工作，这样每张幻灯片都包含4个<li>，其余的都隐藏在溢出中。

我很想使用这个插件：http://slidesjs.com/

我的第一个预感是创建另一个jquery插件，它将计算li并附加div。那样：

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

但这很脏，并且在任何方面都不正确将div放在<ul>。

我想知道这是否是唯一的方法，而不是一个jquery专业人士，我想知道是否有更好的解决方案。

提前致谢。

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>

我的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”）除去（）; - ＆GT; container.find（ “LI”）除去（）;
slide_container.addClass（ “滑动”）;这不起作用。

在查看代码时，我意识到没有必要将所有内容都放在div中。但是使用简单的<ul class="slide">代替更正确的标记。

Answer 1

那么你的问题就变成了如何分割LI的N个数，然后用拆分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>

假设您已经包含了“滑块”脚本。我试图尽可能地评论并保持直截了当，所以我希望这有帮助！但如果您需要任何清晰度，请告诉我！：）

编辑＃1：

我已经加入jsfiddle for you here来查看。我复制/粘贴了我的代码，似乎工作正常，但这是基于我的初始代码和div容器。

使用我的代码，将需要div容器，因为代码会尝试遵循slidejs's example code构造，在这种构造中，您需要某种容器，以及一些div用作幻灯片。出于这个原因，我建议你保持容器的jQuery以反馈，允许它在slidejs的代码（位于here）之后正确地将li元素放在隔离的div幻灯片元素中

我希望这是有道理的！如果你还在苦苦挣扎，请告诉我！：）

jquery滑块4在时间问题上滑动

1 个答案: