一页上的多个幻灯片显示使第一个幻灯片不再起作用

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

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 >Manual Slideshow</h2><div  id="div1">  <img  src="https://i.imgur.com/eLarayS.jpg" >  <img  src="https://i.imgur.com/xpOiMWh.jpg" >  <img  src="https://i.imgur.com/lgcC8Y5.jpg" >  <img  src="http://i.imgur.com/ufmiVTQ.jpg" >  <a  onclick="plusDivs(this,-1)">&#10094;</a>  <a  onclick="plusDivs(this,1)">&#10095;</a></div><div  id="div2">  <img  src="https://i.imgur.com/eLarayS.jpg" >  <img  src="https://i.imgur.com/xpOiMWh.jpg" >  <img  src="https://i.imgur.com/lgcC8Y5.jpg" >  <img  src="http://i.imgur.com/ufmiVTQ.jpg" >  <a  onclick="plusDivs(this, -1)">&#10094;</a>  <a  onclick="plusDivs(this, 1)">&#10095;</a></div>

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