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>

我的每个幻灯片的内容都在html文件中（没有'li'）在名为page-2.html，page-3.html的文件中如下：

<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>

此代码会将您的页面加载到容器中。它将使用容器类的索引（+1）作为页面 - {＃}。html。或者，如果您将其替换为(k+1)

，则可以使用部分ID代替($(this).attr('id').split('section')[1])

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

1 个答案:

JS

HTML