一个页面上的多个幻灯片显示第一个不再有效

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

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"; } 

如您所见，我刚为Jquery和CSS中的每种类型的对象添加了“2”。 我想我必须给那些繁殖的命令赋予不同的名称但是如何做呢？

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

Answer 1

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

 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"; } 

   
Manual Slideshow
 
     ❮ ❯ 
 
     ❮ ❯  

Answer 2

他们的代码中的主要问题是它是制作好的……对于一个幻灯片放映，当你尝试将它应用于多个幻灯片时，会出现一些严重的问题，正如你所经历的那样。 他们使用全局变量（index，n），当你有一个幻灯片放映时没有问题，但是有更多的幻灯片 – 难以处理的东西，并且很难用现有的概念来引用当前的幻灯片div 。

而且，是的，这是简单的javascript幻灯片，这里没有jQuery。 我稍微改变了你的HTML和CSS（点div是INSIDE幻灯片div，只是为了更容易的目标），而且，我已经删除了内联事件处理程序，只是为了让事情变得更容易和更清洁。

这可以通过多种方式解决，我选择了这个：

 (function() { init(); //on page load - show first slide, hidethe rest function init() { parents = document.getElementsByClassName('slideshow-container'); for (j = 0; j < parents.length; j++) { var slides = parents[j].getElementsByClassName("mySlides"); var dots = parents[j].getElementsByClassName("dot"); slides[0].classList.add('active-slide'); dots[0].classList.add('active'); } } dots = document.getElementsByClassName('dot'); //dots functionality for (i = 0; i < dots.length; i++) { dots[i].onclick = function() { slides = this.parentNode.parentNode.getElementsByClassName("mySlides"); for (j = 0; j < this.parentNode.children.length; j++) { this.parentNode.children[j].classList.remove('active'); slides[j].classList.remove('active-slide'); if (this.parentNode.children[j] == this) { index = j; } } this.classList.add('active'); slides[index].classList.add('active-slide'); } } //prev/next functionality links = document.querySelectorAll('.slideshow-container a'); for (i = 0; i < links.length; i++) { links[i].onclick = function() { current = this.parentNode; var slides = current.getElementsByClassName("mySlides"); var dots = current.getElementsByClassName("dot"); curr_slide = current.getElementsByClassName('active-slide')[0]; curr_dot = current.getElementsByClassName('active')[0]; curr_slide.classList.remove('active-slide'); curr_dot.classList.remove('active'); if (this.className == 'next') { if (curr_slide.nextElementSibling.classList.contains('mySlides')) { curr_slide.nextElementSibling.classList.add('active-slide'); curr_dot.nextElementSibling.classList.add('active'); } else { slides[0].classList.add('active-slide'); dots[0].classList.add('active'); } } if (this.className == 'prev') { if (curr_slide.previousElementSibling) { curr_slide.previousElementSibling.classList.add('active-slide'); curr_dot.previousElementSibling.classList.add('active'); } else { slides[slides.length - 1].classList.add('active-slide'); dots[slides.length - 1].classList.add('active'); } } } } })(); 

  /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom:20px; width: 100%; text-align: center; } .mySlides { display:none; } .active-slide { display:block; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } 

 
 
 
1 / 4
  
Caption Text
 
 
 
2 / 4
  
Caption Two
 
 
 
3 / 4
  
Caption Three
 
 
 
4 / 4
  
Caption Four
 
 ❮ ❯ 
     
 
 
 
 
 
1 / 3
  
Caption Text
 
 
 
2 / 3
  
Caption Two
 
 
 
3 / 3
  
Caption Three
 
 ❮ ❯ 
    
 
 
 

Answer 3

这里通过数组和索引操作来解决问题

数组应根据幻灯片的大小resize

 var slideIndex = new Array(2); slideIndex[0]=1; slideIndex[1]=1; showSlides(1, 0); showSlides(1, 1); function plusSlides(n, slideshownumber) { slideIndex[slideshownumber] = slideIndex[slideshownumber] + n; showSlides( slideIndex[slideshownumber], slideshownumber ); } function currentSlide(n, slideshownumber) { slideIndex[slideshownumber] = n; showSlides(slideIndex[slideshownumber], slideshownumber); } function showSlides(n, slideshownumber) { var i; 

建立名称在’滑块’+ slideshownumer，0基于计数（重要）

  var slideshowname = "slider" + slideshownumber; var slides = document.getElementsByName(slideshowname); 

建立名称在’dot’+ slideshownumer，0基础计数（重要）

  var dotname = "dot" + slideshownumber; var dots = document.getElementsByName(dotname); if (n > slides.length) { slideIndex[slideshownumber] = 1; } if (n < 1) { slideIndex[slideshownumber] = 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(" active", ""); } slides[slideIndex[slideshownumber]-1].style.display = "block"; dots[slideIndex[slideshownumber]-1].className += " active"; } 

幻灯片放映的例子，点和滑块名称应该进展到slider1，slider2，...

 
 
 
1 / 2
  
 
 
2 / 2
   

plusSlides（-1表示后退，幻灯片0）加上滑动（1表示前锋，幻灯片0）

  ❮ ❯  

初始化

函数currentSlide（slidenumber，slideshownumber）用于点和上一个/下一个按钮！

下一个名为slider1的滑块

 
 
 
1 / 2
  
 
 
2 / 2
   

现在为slider1更改了参数

  ❮ ❯