如何在同一个 html 文档中制作多个幻灯片? [英] How do I make multiple slideshows in the same html document?

查看：27
本文介绍了如何在同一个 html 文档中制作多个幻灯片?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在这里使用 w3schools 示例:https://www.w3schools.com/howto/howto_js_slideshow.asp，但是当我尝试添加第二个幻灯片时，它不会出现，直到我通过第一个.I.E 一次只打开一个幻灯片.如何让多个幻灯片(至少 4 个)同时可见和可用?

解决方案

为每个幻灯片容器分配一个 id，并将其提供给所有幻灯片放映功能.此外，使用相同的对象来跟踪当前的幻灯片索引.

var slideshow1 = document.getElementById("slideshow1");幻灯片1.currentSlideIndex = 1;showSlides(slideshow1.currentSlideIndex,slideshow1);var slideshow2 = document.getElementById("slideshow2");slideshow2.currentSlideIndex = 1;showSlides(slideshow2.currentSlideIndex,slideshow2);功能 plusSlides(n, 幻灯片) {showSlides(slideshow.currentSlideIndex += n, 幻灯片);}函数 currentSlide(n, 幻灯片) {showSlides(slideshow.currentSlideIndex = n, 幻灯片);}功能showSlides(n，幻灯片){变量 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 

* {box-sizing:border-box}body {font-family: Verdana,sans-serif;margin:0}.mySlides {显示:无}/* 幻灯片容器 */.slideshow-container {最大宽度:1000px；位置:相对；保证金:自动；}/* 下一个 &上一个按钮 */.prev, .next {光标:指针；位置:绝对；顶部:50%；宽度:自动；填充:16px；边距顶部:-22px；白颜色;字体粗细:粗体；字体大小:18px；过渡:0.6s 缓和；边界半径:0 3px 3px 0;}/* 将下一步按钮"放在右侧 */.下一个 {右:0；边框半径:3px 0 0 3px；}/* 在悬停时，添加一个黑色背景颜色，有点透明 */.prev:hover, .next:hover {背景颜色:RGBA(0,0,0,0.8)；}/* 标题文本 */.文本 {颜色:#f2f2f2；字体大小:15px；填充:8px 12px；位置:绝对；底部:8px；宽度:100%；文本对齐:居中；}/* 数字文本(1/3 等)*/.nu​​mbertext {颜色:#f2f2f2；字体大小:12px；填充:8px 12px；位置:绝对；顶部:0；}/* 点/项目符号/指标 */.dot {游标:指针；高度:13px；宽度:13px；边距:0 2px；背景颜色:#bbb；边界半径:50%；显示:内联块；过渡:背景色 0.6s 缓和；}.active, .dot:hover {背景色:#717171；}/* 淡入淡出动画 */.褪色 {-webkit-animation-name:淡入淡出；-webkit-animation-duration: 1.5s;动画名称:淡入淡出；动画持续时间:1.5s；}@-webkit-keyframes 淡出 {来自{不透明度:.4}到{不透明度:1}}@关键帧淡出{来自{不透明度:.4}到{不透明度:1}}/* 在较小的屏幕上，减小文本大小 */@media only screen and (max-width: 300px) {.prev, .next,.text {font-size: 11px}}

<div class="mySlides 淡入淡出"><div class="numbertext">1/3</div><img src="img_nature_wide.jpg" style="width:100%"><div class="text">Caption Text</div>
<div class="mySlides 淡入淡出"><div class="numbertext">2/3</div><img src="img_fjords_wide.jpg" style="width:100%"><div class="text">标题二</div>

<div class="mySlides 淡入淡出"><div class="numbertext">3/3</div><img src="img_mountains_wide.jpg" style="width:100%"><div class="text">标题三</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>

<br><div id="slideshow2" class="slideshow-container"><div class="mySlides 淡入淡出"><div class="numbertext">1/3</div><img src="img_nature_wide.jpg" style="width:100%"><div class="text">Caption Text</div>

<div class="mySlides 淡入淡出"><div class="numbertext">2/3</div><img src="img_fjords_wide.jpg" style="width:100%"><div class="text">标题二</div>

<div class="mySlides 淡入淡出"><div class="numbertext">3/3</div><img src="img_mountains_wide.jpg" style="width:100%"><div class="text">标题三</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>


I'm using the w3schools example here: https://www.w3schools.com/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?

解决方案

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>

这篇关于如何在同一个 html 文档中制作多个幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆