javascript - 减少代码长度

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

那么，您可以将第一个(动态 block )转换为 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>