【发布时间】：2021-08-14 11:56:30
【问题描述】：
在解释问题之前，这里有一点上下文。学校希望我们只使用 HTML/CSS、Javascript 和 JQuery 从头开始构建单页网络简历。
对于那个项目，我有很多想法。其中之一是使用报价滑块。每 x 秒它滑动到下一个引用。所以我去寻找可以工作的东西，我找到了这个并对其进行了调整，使其看起来像：
slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
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(" activeDot", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " activeDot";
}
$(document).ready(function() {
showSlides(slideIndex);
setInterval(() => {
plusSlides(1);
}, 5000);
});.sliderContainer {
position: relative;
background: #eee;
/* Not useful here */
}
.slide {
display: none;
padding: 30px;
text-align: center;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #444;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
/* Changes color and background color */
}
.dotContainer {
margin-bottom: 30px;
text-align: center;
padding: 20px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #444;
/* still not useful but I let it */
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.activeDot,
.dot:hover {
/* changes background-color */
}
q {
/* changes font-style */
}
.author {
/* changes color */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<div class="sliderContainer">
<div class="slide">
<q>A quote</q>
<p class="author">The quote's author</p>
</div>
<div class="slide">
<q>Another quote</q>
<p class="author">The quote's other author</p>
</div>
<!-- Left and Right buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dotContainer">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>所以，这段代码运行良好。
但后来我想在其他地方添加另一个滑块。这是一个数字滑块而不是报价滑块，但这并没有改变任何东西。 我确实在 HTML 中构建了它，并查看了它是如何工作的。 而且它不能正常工作，因为所有幻灯片都有相同的类。很明显。
然后我尝试将课程从slide 更改为quoteSlide 和figureSlide。然后我意识到我需要更改所有与此相关的 JavaScript。
好吧，只有 2 个滑块，没关系。我只是复制/粘贴并更改了函数的名称和其他小东西，以获得引用改编脚本和图形改编脚本。
但后来，我意识到我总共需要 七个 滑块。而且我不会得到七次相同的脚本。所以我想了想，我发现了一个有趣的想法。 在我的学校课程中，我们学习了很多 OOP（面向对象编程）。但我们从未在 Javascript 课程中讨论过它。 所以我对自己说，为什么不尝试这样做呢。
这不是最简单的学习方法，但我设法得到了一些东西。剧透：这东西没用。但这里是：
class Slider {
slideIndex = 1;
slides;
dots;
constructor(index = 1, slides, dots) {
slideIndex = index;
slides = document.getElementsByClassName(slides);
dots = document.getElementsByClassName(dots);
}
plusSlides(n) {
showSlides(slideIndex += n);
}
currentSlide(n) {
showSlides(slideIndex = n);
}
showSlides(n) {
var i;
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(" activeDot", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " activeDot";
}
setupSlider() {
showSlides(slideIndex);
// Sliding automation
setInterval(() => {
plusSlides(1);
console.log(this.slideIndex);
}, 5000);
}
}
这是主 JS 文件中的代码：
let quoteSlider = new Slider(1, ".quoteSlide", ".quoteDot");
let lectureSlider = new Slider(1, ".lectureSlide", ".lectureDot");
let gameSlider = new Slider(1, ".gameSlide", ".gameDot");
let softwareSlider = new Slider(1, ".softwareSlide", ".softwareDot");
let roboticSlider = new Slider(1, ".roboticSlide", ".roboticDot");
let teachingSlider = new Slider(1, ".teachingSlide", ".teachingDot");
let streamingSlider = new Slider(1, ".streamingSlide", ".streamingDot");
quoteSlider.setupSlider();
lectureSlider.setupSlider();
gameSlider.setupSlider();
softwareSlider.setupSlider();
roboticSlider.setupSlider();
teachingSlider.setupSlider();
streamingSlider.setupSlider();
这段代码不起作用，但我不明白为什么。
所以这是我的问题：
- 我在思考过程中是否犯了错误？哪一个？
- 我在所有这些 JS 内容中哪里出错了？
- 如果您知道上下文，您会为老师提供什么解决方案？
- 在全球范围内有什么可以做得更好的事情吗？
免责声明：这个项目已经结束。我故意等到时限结束才问，因为我不想用别人的代码来获得这门课的积分。
感谢您的帮助，很抱歉这么长的文字。
【问题讨论】：
标签： javascript html jquery css slider