将内容动态加载到内容滑块中

Question

我正在开发一个网站，它利用 bx 滑块创建一个全屏演示风格的幻灯片网站。

目前幻灯片都被硬编码到主页中，如下所示：

<ul class="bxslider group">


<li>
  <div class="container" id="section1">
   ..content
  </div>
</li>

<li>
  <div class="container" id="section2">
   ..content
  </div>
</li>

 <!-- and so on -->

</ul>

我还将每张幻灯片的内容放在名为 page-2.html、page-3.html 的文件中的 html 文件中（没有“li”），如下所示：

<div class="container" id="section2">
   ..content
  </div>

如何编写代码，以便幻灯片从每张幻灯片的相应 html 页面中提取数据？如果可能，计算有多少页以及要制作多少张幻灯片？

非常感谢

Answer 1

JS

$(document).ready(function() {

    var slider = $('.bxslider').bxSlider({
      mode: 'horizontal'
    });

    $('ul.bxslider li .container').each(function(k, v) {
        $(this).append('<div/>').load('page-' + (k+1) + '.html');
    }).promise().done(function() { slider.reloadSlider() });
});

HTML

<ul class="bxslider group">

<li>
  <div id="section1" class="container">
   ..content
  </div>
</li>

<li>
  <div id="section2" class="container">
   ..content
  </div>
</li>

</ul>

此代码会将您的页面加载到容器中。它将使用页面-{#}.html 的容器类 (+1) 的索引。或者，如果您将其替换为 ($(this).attr('id').split('section')[1]) 之类的内容，则可以使用部分 id 而不是 (k+1)