Question

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

我知道之前曾有人问过这个问题，但是我似乎无法使这些答案与我的代码一起使用，有人对它有任何建议吗？我没有使用Java的大量经验

props.setProperty("mail.store.protocol", "imaps");

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

Answer 1

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

创建一个initializeSlideshow(containerID)方法，然后将方法绑定到下一个按钮，例如

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
}

如何在一页上启用多个JavaScript幻灯片显示？

1 个答案: