一个页面上的多个幻灯片显示第一个不再有效 [英] Multiple slideshows on one page makes the first one not work anymore

问题描述

首先我知道这个问题在答案没有解决我的问题之前被问过所以我想再问一遍：
我使用了来自W3school的幻灯片代码，它提供了一个很好的动画Jquery幻灯片。不幸的是，我的页面需要不止一个，第二个停止第一个工作。甚至在此之前找到这个解决方案之前，我尝试更改不同幻灯片的对象的CSS和HTML名称，这些问题成功解决了部分问题（第二个没有显示），但如前所述，阻止了第一个工作。幻灯片显示在这里，但单击箭头将不会执行任何操作。
我略微明白问题是什么，但无法修复。
以下是我修改第二个代码的方法：

First of all I know this question's been asked before the answer wasn't solving my problem so I'd like to ask it again : I used a Slideshow code from "W3school" wich provides a nice animated Jquery slideshow. unfortunately, I need more than one on my page and the second one stops the first one from working. Even before finding this solution here, I tried changing the CSS and HTML names of the objects of the different slideshows, wich successfully sovled part of the problem (the second one was not showing) but as mentioned earlier, stopped the first one from working. The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is how I modified the code for the second one :

var slideIndex = 7;
showSlides(slideIndex);

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

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

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides2");
    var dots = document.getElementsByClassName("dot2");
    if (n > slides.length) {
        slideIndex = 1
    }    
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active2", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active2";
}

如你所见，我刚为两种类型的物品添加了'2' Jquery和CSS。我想我必须给命令增加不同的命名但是怎么做？

As you see I just added '2' for every type of objects in both Jquery and CSS. I guess I have to give different names to commands that multiply but how to do it ?

编辑： https://jsfiddle.net/mgb7k239/
这是Jsfiddle中的一个例子，但我不明白为什么这里的第一个不是即使是幻灯片，第二个也不起作用：/它确实在我的电脑上！我忘了在电脑上说，点击第一张幻灯片上的箭头改变第二张照片上的图片！
我用互联网上随机的图片替换了图片。

https://jsfiddle.net/mgb7k239/ Here is a an exemple in Jsfiddle but I dont understand why here the first one isnt even a slideshow and the second one doesn't work either :/ It does on my computer however ! And I forgot to say on my computer, clicking arrows on the first slideshow changes pictures on the second one ! I replaced the pictures with random ones found on the internet.

推荐答案

我在这里创建了一个解决方案：

I've created a solution here:

var sliderObjects = [];
createSliderObjects();

function plusDivs(obj, n) {
  var parentDiv = $(obj).parent();
  var matchedDiv;
  $.each(sliderObjects, function(i, item) {
    if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
      matchedDiv = item;
      return false;
    }
  });
  matchedDiv.slideIndex=matchedDiv.slideIndex+n;
  showDivs(matchedDiv, matchedDiv.slideIndex);
}

function createSliderObjects() {
  var sliderDivs = $('.slider');
  $.each(sliderDivs, function(i, item) {
    var obj = {};
    obj.id = $(item).attr('id');
    obj.divContent = item;
    obj.slideIndex = 1;
    obj.slideContents = $(item).find('.mySlides');
    showDivs(obj, 1);
    sliderObjects.push(obj);
  });
}

function showDivs(divObject, n) {
  debugger;
  var i;
  if (n > divObject.slideContents.length) {
    divObject.slideIndex = 1
  }
  if (n < 1) {
    divObject.slideIndex = divObject.slideContents.length
  }
  for (i = 0; i < divObject.slideContents.length; i++) {
    divObject.slideContents[i].style.display = "none";
  }
  divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container slider" id="div1">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this,-1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">&#10095;</a>
</div>

<div class="w3-content w3-display-container slider" id="div2">
  <img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
  <img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
  <img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">

  <a class="w3-btn-floating w3-display-left" onclick="plusDivs(this, -1)">&#10094;</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this, 1)">&#10095;</a>
</div>

现在，您可以为具有slider类和唯一ID的滑块添加尽可能多的div。

you can now add as many divs for sliders with 'slider' class and a unique id.

这篇关于一个页面上的多个幻灯片显示第一个不再有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！