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

首先我知道在答案没有解决我的问题之前已经问过这个问题,所以我想再问一遍：
我使用了来自“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的例子,但我不明白为什么这里第一个甚至不是幻灯片,第二个也不起作用：/它在我的电脑上呢！我忘了在电脑上说,点击第一张幻灯片上的箭头改变第二张照片上的图片！
 我用在互联网上找到的随机图片替换了图片.

解决方法:

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

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.

标签：slideshow,javascript,jquery,css
来源： https://codeday.me/bug/20190926/1819781.html