javascript - 如何在一页上启用多个 javascript 幻灯片？

Question

我想在单个页面上创建多个幻灯片，但目前无法正常工作

我知道之前有人问过这个问题，但我似乎无法让这些答案与我的代码一起使用，有人有什么建议吗？我没有大量的 Javascript 经验

<div class="bareEditorial">

<div class="slideshow-container" onclick="plusSlides(1)">   

<div class="mySlides fade">
  <div class="image">
    <img src="bareEditorialHero.jpg">
  </div>
    </div>

<div class="mySlides fade">
    <div class="image">
    <img src="bareEditorial2.jpg">
  </div>
    </div>

<div class="mySlides fade">
    <div class="image">
    <img src="bareEditorial3.jpg">
  </div>
    </div>



<div class="ninetydegrees">     
<div class="nextprevious">

  <div class="numbertext">Bare Boutique Editorial 2018 (<span>1</span> / <span>6</span>)</div>
</div>

var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;

showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}

$(function() {
  $('body').removeClass('fade-out');
});

Answer 1

考虑到您需要有关在一个页面上实现多个幻灯片的信息，而不是深入了解每个幻灯片的详细工作，我建议您为每个幻灯片制作一个具有唯一 ID 的幻灯片容器，并通过传递给每个幻灯片调用您的初始化方法id 作为参数。

创建一个方法作为 initializeSlideshow(containerID) 并在该方法中将方法绑定(bind)到例如下一个按钮作为

function initializeSlideshow(containerID) {
    $('#' + containerID + '.prevLink').on('click', function() {} );
    //rest of your logic
}

另一种方法是向每个容器添加一个类，并以使用 closest() 捕获相应容器并操作 DOM 的方式实现方法

$('.containerClass .prevLink').on('click', function() {
    $(this).closest('.containerClass').find('.slideCLass');
});

在理想情况下，应该编写代码将幻灯片逻辑实现为一个插件，您可以在其中简单地执行

$('.slideshowContainer').initializeSlideshow( {
    //slideshow options.
})

可以实现为

$.fn.initializeSlideshow = function(slideshowOptions) {
    //your logic where reference to this (object on which the method is called) is available
}