减少代码长度

Question

我希望在同一个网页上有多个独立的幻灯片我有这个脚本并且运行良好但是我想知道是否有一个更短的方法来实现这个，因为我需要再添加五个幻灯片到我使用这个例子的页面来自w3 slideshow

var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  "use strict";
  showSlides(slideIndex = n);
}

function showSlides(n) {
  "use strict";
  var i;
  var slides = document.getElementsByClassName("comment-box");
  var dots = document.getElementsByClassName("dot");
  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(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  slides[slideIndex - 1].style.margin = "0 auto";
  dots[slideIndex - 1].className += " active";
}

var slideIndex1 = 1;
showSlides1(slideIndex1);

function plusSlides1(n) {
  "use strict";
  showSlides1(slideIndex1 += n);
}

function currentSlide1(n) {
  "use strict";
  showSlides1(slideIndex1 = n);
}

function showSlides1(n) {
  "use strict";
  var j;
  var slides1 = document.getElementsByClassName("mini-box1");
  var dots1 = document.getElementsByClassName("dot1");
  if (n > slides1.length) {
    slideIndex1 = 1;
  }
  if (n < 1) {
    slideIndex1 = slides1.length;
  }
  for (j = 0; j < slides1.length; j++) {
    slides1[j].style.display = "none";
  }
  for (j = 0; j < dots1.length; j++) {
    dots1[j].className = dots1[j].className.replace(" active", "");
  }
  slides1[slideIndex1 - 1].style.display = "block";
  slides1[slideIndex1 - 1].style.margin = "0 auto";
  dots1[slideIndex1 - 1].className += " active";
}

var slideIndex2 = 1;
showSlides2(slideIndex2);

function plusSlides2(n) {
  "use strict";
  showSlides2(slideIndex2 += n);
}

function currentSlide2(n) {
  "use strict";
  showSlides2(slideIndex2 = n);
}

function showSlides2(n) {
  "use strict";
  var k;
  var slides2 = document.getElementsByClassName("mini-box2");
  var dots2 = document.getElementsByClassName("dot2");
  if (n > slides2.length) {
    slideIndex2 = 1;
  }
  if (n < 1) {
    slideIndex2 = slides2.length;
  }
  for (k = 0; k < slides2.length; k++) {
    slides2[k].style.display = "none";
  }
  for (k = 0; k < dots2.length; k++) {
    dots2[k].className = dots2[k].className.replace(" active", "");
  }
  slides2[slideIndex2 - 1].style.display = "block";
  slides2[slideIndex2 - 1].style.margin = "0 auto";
  dots2[slideIndex2 - 1].className += " active";
}

var slideIndex3 = 1;
showSlides3(slideIndex3);

function plusSlides3(n) {
  "use strict";
  showSlides3(slideIndex3 += n);
}

function currentSlide3(n) {
  "use strict";
  showSlides3(slideIndex3 = n);
}

function showSlides3(n) {
  "use strict";
  var l;
  var slides3 = document.getElementsByClassName("mini-box3");
  var dots3 = document.getElementsByClassName("dot3");
  if (n > slides3.length) {
    slideIndex3 = 1;
  }
  if (n < 1) {
    slideIndex3 = slides3.length;
  }
  for (l = 0; l < slides3.length; l++) {
    slides3[l].style.display = "none";
  }
  for (l = 0; l < dots3.length; l++) {
    dots3[l].className = dots3[l].className.replace(" active", "");
  }
  slides3[slideIndex3 - 1].style.display = "block";
  slides3[slideIndex3 - 1].style.margin = "0 auto";
  dots3[slideIndex3 - 1].className += " active";
}

Answer 1

好吧，您可以将第一个（动态块）转换为JavaScript对象/类结构。

然后，您可以创建幻灯片的五个或更多实例，每个实例都有自己的索引来跟踪当前幻灯片。每个函数都是对象的一个​​方法，所以它们应该相互独立。

function Slideshow(options) {
  this.slideIndex = 1;
  this.slideClass = options.slideClass;
  this.dotClass = options.dotClass;
}

Slideshow.prototype.plusSlides = function(n) {
  this.showSlides(this.slideIndex += n);
}
Slideshow.prototype.currentSlide = function(n) {
  this.showSlides(this.slideIndex = n);
}
Slideshow.prototype.showSlides = function(n) {
  var i;
  var slides = document.getElementsByClassName(this.slideClass);
  var dots = document.getElementsByClassName(this.dotClass);
  if (n > slides.length) {
    this.slideIndex = 1;
  }
  if (n < 1) {
    this.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(" active", "");
  }
  slides[this.slideIndex - 1].style.display = "block";
  slides[this.slideIndex - 1].style.margin = "0 auto";
  dots[this.slideIndex - 1].className += " active";
}

用法

var mySlideshow = new Slideshow({
  slideClass : "comment-box",
  dotClass : "dot"
});
mySlideshow.showSlides(mySlideshow.slideIndex);

演示

这是一个演示，展示了两个同时运行的幻灯片。

function Slideshow(options) {
  this.slideIndex = 1;
  this.selector = options.selector;
  this.el = document.getElementById(options.id);
  this.createListeners();
  this.showSlides(this.slideIndex);
}
Slideshow.prototype.createListeners = function(n) {
  var self = this;  
  var dots = self.el.getElementsByClassName('slideshow-dot');
  for (var i = 0; i < dots.length; i++) {
    self.createDotListener(dots[i], i + 1);
  }
  self.el.getElementsByClassName('slideshow-prev')[0]
    .addEventListener('click', function() {
      self.plusSlides(-1);
    });
  self.el.getElementsByClassName('slideshow-next')[0]
    .addEventListener('click', function() {
      self.plusSlides(1);
    });
};
Slideshow.prototype.createDotListener = function(dot, index) {
  var self = this;
  dot.addEventListener('click', function() {
    return self.currentSlide(index);
  });
};
Slideshow.prototype.plusSlides = function(n) {
  this.showSlides(this.slideIndex += n);
};
Slideshow.prototype.currentSlide = function(n) {
  this.showSlides(this.slideIndex = n);
};
Slideshow.prototype.showSlides = function(n) {
  var i;
  var slides = this.el.getElementsByClassName('slideshow-slide');
  var dots = this.el.getElementsByClassName('slideshow-dot');
  if (n > slides.length) {
    this.slideIndex = 1;
  }
  if (n < 1) {
    this.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(' active', '');
  }
  slides[this.slideIndex - 1].style.display = 'block';
  slides[this.slideIndex - 1].style.margin = '0 auto';
  dots[this.slideIndex - 1].className += ' active';
};

var mySlideshow1 = new Slideshow({ id : 'my-slideshow-1' });
var mySlideshow2 = new Slideshow({ id : 'my-slideshow-2' });

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slideshow-slide {
    display: none;
}

/* Next & previous buttons */
.slideshow-prev, .slideshow-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 */
.slideshow-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-prev:hover, .slideshow-next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.slideshow-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}
}

<div id="my-slideshow-1">
  <div class="slideshow-container">
    <div class="slideshow-slide fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>
    <div class="slideshow-slide fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>
    <div class="slideshow-slide fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>
    <a class="slideshow-prev">&#10094;</a>
    <a class="slideshow-next">&#10095;</a>
  </div>
  <br>
  <div style="text-align:center">
    <span class="slideshow-dot"></span> 
    <span class="slideshow-dot"></span> 
    <span class="slideshow-dot"></span> 
  </div>
</div>

<div id="my-slideshow-2">
  <div class="slideshow-container">
    <div class="slideshow-slide fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>
    <div class="slideshow-slide fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>
    <div class="slideshow-slide fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>
    <a class="slideshow-prev">&#10094;</a>
    <a class="slideshow-next">&#10095;</a>
  </div>
  <br>
  <div style="text-align:center">
    <span class="slideshow-dot"></span> 
    <span class="slideshow-dot"></span> 
    <span class="slideshow-dot"></span> 
  </div>
</div>