javascript - How do I make multiple slideshows in the same html document? - Stack Overflow

admin管理员组

文章数量:1350335

I'm using the w3schools example here: .asp, but when I try to add a second slideshow it won't appear until I move through the first one. I.E only one of the slideshows are open at a time. How can I have multiple slideshows (minimum 4) visible and usable at the same time?

I'm using the w3schools example here: https://www.w3schools./howto/howto_js_slideshow.asp, but when I try to add a second slideshow it won't appear until I move through the first one. I.E only one of the slideshows are open at a time. How can I have multiple slideshows (minimum 4) visible and usable at the same time?

• javascript
• html
• css
• slideshow

Share Improve this question Follow edited Apr 8, 2017 at 21:25 Mikael Sommervold asked Apr 8, 2017 at 19:58 Mikael SommervoldMikael Sommervold 2711 gold badge11 silver badge44 bronze badges 2

• Are you using different CSS class name for 2nd, 3rd and 4th sildeshow? – Hamza Rashid Commented Apr 8, 2017 at 21:29
• I'm now using the example provided by W. Scott in the answer below and I wonder if you know how to use CSS to set the position of the different slides separate of each other. I'm planning on putting each slideshow underneath the other on the right side of the screen. – Mikael Sommervold Commented Apr 9, 2017 at 9:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Assign an id to each slide container and provide that to all of the slideshow functions. In addition, use that same object to track the current slideshow index.

var slideshow1 = document.getElementById("slideshow1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);

var slideshow2 = document.getElementById("slideshow2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);


function plusSlides(n, slideshow) {
  showSlides(slideshow.currentSlideIndex += n, slideshow);
}

function currentSlide(n, slideshow) {
  showSlides(slideshow.currentSlideIndex = n, slideshow);
}

function showSlides(n, slideshow) {
  


  var i;
  var slides = slideshow.getElementsByClassName("mySlides");
  var dots = slideshow.getElementsByClassName("dot");
  if (n > slides.length) {slideshow.currentSlideIndex = 1}    
  if (n < 1) {slideshow.currentSlideIndex = 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[slideshow.currentSlideIndex-1].style.display = "block";  
  dots[slideshow.currentSlideIndex-1].className += " active";
}

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

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

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  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 */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .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 */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

<div id="slideshow1" class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1,slideshow1)">&#10094;</a>
<a class="next" onclick="plusSlides(1, slideshow1)">&#10095;</a>


<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1, slideshow1)"></span> 
  <span class="dot" onclick="currentSlide(2, slideshow1)"></span> 
  <span class="dot" onclick="currentSlide(3, slideshow1)"></span> 
</div>
</div>
<br>





<div id="slideshow2" class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1, this.parentNode)">&#10094;</a>
<a class="next" onclick="plusSlides(1, this.parentNode)">&#10095;</a>


<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1, slideshow2)"></span> 
  <span class="dot" onclick="currentSlide(2, slideshow2)"></span> 
  <span class="dot" onclick="currentSlide(3, slideshow2)"></span> 
</div>
</div>
<br>

本文标签： javascriptHow do I make multiple slideshows in the same html documentStack Overflow