Question

我正在使用w3schools制作幻灯片。但此代码无法在单页上显示多个幻灯片。任何人都可以帮助修改此代码以处理多个幻灯片。我想展示超过2张幻灯片。

＆＃13;

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}

＆＃13;

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

＆＃13;

Answer 1

我会做两个步骤。

首先，复制并粘贴代码。根据需要进行更改以适用于第二张幻灯片。如果有效，请执行下一步。

其次，创建一个适用于任何和所有幻灯片的功能，删除过程中第一步的重复。此功能只是现有功能，但需要更改的所有内容都成为功能的参数。例如，每个幻灯片放映（“mySlides”）必须具有不同的名称。

Answer 2

如果不向现有标记结构添加其他类或ID，可以使用以下JavaScript代码实现。

// initialisation
function initialiseDataValues() {
  var next, prev, slides;
  // Locate the slideshow containers
  var containers = document.querySelectorAll('div.w3-content.w3-display-container');
  // Loop through the containers
  for (var ix = 0; ix < containers.length; ix++) {
    // Count the number of slides
    slides = containers[ix].getElementsByClassName('mySlides');
    // Add 'data-slides' property to the container
    containers[ix].dataset.slides = slides.length || 0;
    if (containers[ix].dataset.slides > 0) {
      // Add 'data-idx' property to the container
      containers[ix].dataset.idx = 1;
      // Add event handler for 'previous' slide click
      prev = containers[ix].getElementsByClassName('w3-left');
      if (prev) {
        prev[0].addEventListener('click', goPrevSlide);
      }
      // Add event handler for 'next' slide click
      next = containers[ix].getElementsByClassName('w3-right');
      if (next) {
        next[0].addEventListener('click', goNextSlide);
      }
      // Show the first slide in the container
      showSlide(containers[ix], 1);
    }
  }
}

function goToSlide(index) {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, index);
}

function goPrevSlide() {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, Number.parseInt(container.dataset.idx) - 1);
}

function goNextSlide() {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, Number.parseInt(container.dataset.idx) + 1);
}

function showSlide(container, n) {
  var slides = container.getElementsByClassName('mySlides'),
      dots = container.getElementsByClassName('demo'),
      slideIdx = 0,
      dotIdx = 0,
      slideToShow = 0;
  if (n > slides.length) {
    container.dataset.idx = 1;
  } else if (n < 1) {
    container.dataset.idx = slides.length;
  } else {
    container.dataset.idx = n;
  }
  for (slideIdx = 0; slideIdx < slides.length; slideIdx++) {
    slides[slideIdx].style.display = 'none';
  }
  for (dotIdx = 0; dotIdx < dots.length; dotIdx++) {
    dots[dotIdx].classList.remove('w3-white');
  }
  slideToShow = Number.parseInt(container.dataset.idx) - 1;
  slides[slideToShow].style.display = 'block';
  if (slideToShow < dots.length) {
    dots[slideToShow].classList.add('w3-white');
  }
}

initialiseDataValues();

JavaScript代码添加了“上一个”和“下一个”点击事件处理程序，因此HTML代码中不需要它们。每个处理程序函数都会向上移动DOM树以进入幻灯片放映容器。如果您更改HTML，则需要修改代码。

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="goToSlide(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="goToSlide(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="goToSlide(3)"></span>
  </div>
</div>

如何在单页上显示多个幻灯片

2 个答案: