Question

所以，我正在建立一个需要包含多个轮播的网页。我已经成功创造了第一个旋转木马，但却无法破解创造任何其他旋转木马。

我一直在关注Christian Heilmann的Javascript轮播指南，一切顺利，直到我试图将2个轮播放在同一页面上。

由于js正在影响类，我认为现有的js也会影响副本。以下是工作轮播looks以及破碎轮播looks的方式。

关于最佳方式的任何建议都很棒，如果可能的话，我很乐意将它保存在香草js中。谢谢你的帮助！

这是更新的js：

    carousel = function(id) {
    var box = document.querySelector(id + ' .project-pictures');
    var next = box.querySelector(id + ' .next');
    var prev = box.querySelector(id + ' .prev');
    var items = box.querySelectorAll(id + ' .content li');
  var counter = 0;
  var amount = items.length;
  var current = items[0];

  box.classList.add('active');

  function navigate(direction) {
    current.classList.remove('current');
    counter = counter + direction;
    if (direction === -1 && 
        counter < 0) { 
      counter = amount - 1; 
    }
    if (direction === 1 && 
        !items[counter]) { 
      counter = 0;
    }
    current = items[counter];
    current.classList.add('current');
  }
  next.addEventListener('click', function(ev) {
    navigate(1);
  });
  prev.addEventListener('click', function(ev) {
    navigate(-1);
  });
  navigate(0);
}();

carouselA = carousel('#carousel-a');
carouselB = carousel('#carousel-b');

注意：受影响的div是.project-pictures。

感谢您的回复！我仍然没有让旋转木马工作 - 在上面没有工作的截图中看起来是一样的，我觉得我在这里缺少一些非常基本的东西，这里是html供参考，我已经更新了上面的js来反映你的建议：< / p>

<div id="carousel-a">  
  <div class="project-pictures">  

  <ol class="content">  
  <li><img src="images/portfolio_img/design_museum/cropped/1.png">  
  </li>  
  </ol>  
  <div class="buttons">  
  <button class="prev">    
  </button>
  <button class="next">
      <span class="offscreen">Next</span> ▶ 
  </button>
  </div>
</div></div>

Answer 1

你在正确的轨道上说影响css类的javascript适用于两个旋转木马。

您需要做的是区分两个旋转木马。一种方法是为每个轮播创建一个唯一的ID。

例如

carousel = function(id) {
    var box = document.querySelector(id + ' .project-pictures');
    var next = box.querySelector(id + ' .next');
    var prev = box.querySelector(id + ' .prev');
    var items = box.querySelectorAll(id + ' .content li');
    // ...
};

carouselA = carousel('#carousel-a');
carouselB = carousel('#carousel-b');

在HTML代码中，为两个轮播元素插入适当的ID。

在单个页面上实现多个轮播

1 个答案: