实现轮播

最新推荐文章于 2024-04-15 10:28:24 发布

原创最新推荐文章于 2024-04-15 10:28:24 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的动态分页功能，该功能能够根据用户点击切换不同的页面显示对应的演讲者信息。通过切片操作和DOM操作，有效地实现了演讲者列表的分页展示，并且加入了激活状态的样式来指示当前所在的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  var speakers = schemaData.speakers[0].list;
  var speakerPageNum = Math.ceil(speakers.length / 6);
 

  var speakerPageDots = '';
  for (var i = 0; i < speakerPageNum; i++) {
    if (i == 0) {
      speakerPageDots += `<span class="speakerPageDot active" data-index=${i} ></span>`;
    } else {
      speakerPageDots += `<span class="speakerPageDot" data-index=${i} ></span>`;
    }
  }
 
  wrapNode.find('.speakers-dots').append(speakerPageDots);
  function display(num){
    var currentSpeakers = speakers.slice(num * 6, num * 6 + 6);
   
      $('.speakers-items').children().remove();
      var areaChampionsString = '';
      var currentSpeakersLength = currentSpeakers.length;
      for (var i = 0; i < currentSpeakersLength; i++) {
        areaChampionsString += `
        <li class="dn-col-xs-8 dn-col-sm-4 dn-col-md-4">
              <div class="speakers-item " >
                <img src="${currentSpeakers[i].photo}"/>
                <div class="speakers-item-des">
                  <h3>${currentSpeakers[i].nich}</h3>
                  <p>${currentSpeakers[i].job}</p>
                </div>
              </div>
            </li>
      `
      }
      $('.speakers-items').append(areaChampionsString).fadeIn(500);
  }
  display(0);//首次加载
  wrapNode.find('.speakers-dots').delegate('.speakerPageDot', 'click', function () {
    var num = this.dataset['index'];
    $(this).addClass('active');
    $(this).siblings().removeClass('active');   
    
     display(num);
  
  })