javascript - 简单的轮播，它使用内容项的数量更新其导航按钮

Question

我正在尝试制作一个轮播，它根据content元素中的列表项更新导航按钮。

<div id="content" class="content">
        <div>Something goes here</div>
        <div>Something goes here</div>
        <div>Something goes here</div>
        <div>Something goes here</div>
    </div>

导航按钮会自行更新。

<ul id="page_number" class="page_number">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
    </div>

问题是这些导航项不应该像这里那样是静态的，它们应该通过在 DOM 中创建作为内容项更新来更新。

Answer 1

不知道你试过什么，但我会做的是

计算在 #content 中找到的子 div 的数量：

var divcount = 0;

divcount = $("#content div").length;
});

然后，一旦您定义了 div 的数量，您就可以使用该数字（divcount）来创建单独的“导航项”（链接）以进行分页：

$("#content div").each(function( i ) {
  $("#content").append("<li>" + i + "</li>");
});

我敢肯定，它可以简化，但你明白了基本的想法。希望这可以帮助。

示例：工作演示小提琴