如何在同一页面上显示两个幻灯片? [英] How to display two slideshows on the same page?
本文介绍了如何在同一页面上显示两个幻灯片?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我以幻灯片演示为例，效果很好.每个幻灯片之间都有共享的类，这意味着当一个幻灯片仅完成时，下一个幻灯片才能开始，我需要它们能够彼此独立地工作，需要更改类.
I'm using this slideshow as an example, which works perfectly fine. There are shared classes between each slideshow which means that when one finishes only then can the next one begin, I need them to be able to work independently of each other, will classes need to be changed.
这里只有一张幻灯片
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
dots[slideIndex-1].className += " active";
}
</script>* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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);
color: white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>当我添加第二个问题时，问题就来了，它们不能彼此独立地工作
The problem comes when I add a second, they don't work independently of each other
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
dots[slideIndex-1].className += " active";
}
</script>* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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);
color: white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}<h1>Slideshow 1</h1>
<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<h1>Slideshow 2</h1>
<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>我希望脚本能够执行此操作，而不必更改每个类名并复制每个CSS类，这将仅在Vanilla JS中解决.它先遍历第一个，然后遍历第二遍，如何将它们独立对待?
I'd rather the script be able to do this than have to change every class name and duplicate every CSS class, how would this be addressed in Vanilla JS only. It loops through the first and then the second is looped through, how can these be treated independently?
先谢谢您了:)
推荐答案
我不知道是否应该这样做...但是这里有面向对象的处事风格...
I dont know if I should do this... But here goes Object Oriented Style of doing things...
- 为所有幻灯片 创建一个 Class
- 创建每张幻灯片的实例
- 调用所需实例的函数.我在html中编辑的内容是对 Instances(或对象)的onclick调用，我将幻灯片和圆点都包裹在一个小节div中.
现在您有两部分幻灯片(幻灯片+点)可以独立工作..
Now you have two sections of slides( slide + dots ) working independently..
let slide1 = new CreateSlide(0);
let slide2 = new CreateSlide(1);
function CreateSlide(index) {
this.slideContainer = document.getElementsByClassName("section")[index];
this.slideIndex = 1;
this.plusSlides = function(n) {
this.showSlides(this.slideIndex += n);
};
this.currentSlide = function(n) {
this.showSlides(this.slideIndex = n);
};
this.showSlides = function(n) {
var i;
var slides = this.slideContainer.getElementsByClassName("mySlides");
var dots = this.slideContainer.getElementsByClassName("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";
dots[this.slideIndex - 1].className += " active";
}
this.showSlides(1);
}* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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);
color: white;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {
font-style: italic;
}
/* Add a blue color to the author */
.author {
color: cornflowerblue;
} <h1>Slideshow 1</h1>
<div class="section">
<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="slide1.plusSlides(-1)">❮</a>
<a class="next" onclick="slide1.plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="slide1.currentSlide(1)"></span>
<span class="dot" onclick="slide1.currentSlide(2)"></span>
<span class="dot" onclick="slide1.currentSlide(3)"></span>
</div>
</div>
<div class="section">
<h1>Slideshow 2</h1>
<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="slide2.plusSlides(-1)">❮</a>
<a class="next" onclick="slide2.plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="slide2.currentSlide(1)"></span>
<span class="dot" onclick="slide2.currentSlide(2)"></span>
<span class="dot" onclick="slide2.currentSlide(3)"></span>
</div>
</div>这篇关于如何在同一页面上显示两个幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
