向响应滑块/转盘添加暂停/播放时出现问题.JS CSS HTML没有引导程序或Jquery

我正在学习编码，在第二个滑块上遇到了问题。

我已经成功地将手动控件加载到第二个滑块，但我真的很难只使用JS CSS和HTML添加播放/暂停按钮。我已经设法添加了播放暂停和一些javascript和CSS，但使用pauseSlideshow((和playSlideshow((不会奏效。

在过去的一周里，我看了很多教程，但我不知道我的代码有什么不起作用。

如有任何帮助，我们将不胜感激。

这是我的一些代码：

注意：我已经排除了网页中第一个滑块的代码，因为我正专注于播放暂停的第二个滑块。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
<script src="app.js" defer></script>
<title>GT</title>
</head>
<body>
<!-- Main Title Web page start  -->
<header>
<h1 class="banner">G-T</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Image Carousel</a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>

Thanks for taking the time to stop by. Watch my journey as I learn to code
code.
<!-- Image Carousel with the play pause issue -->
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="images/photo-of-a-fish-on-corals-1522160.jpg" alt="Splash" style="width: 100%;" />

</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="images/photo-of-a-turtle-underwater-847393 (1).jpg" alt="diving" style="width: 100%;"/>

</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="images/fish-in-water_opt.jpg" alt="Yellow and blue tang fish" style="width: 100%;" />

</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<a type="button" id="pause">&#x23F8;</a>

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

</body>
</html>

<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
// Manual control 
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no - 1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if (newslideIndex < 4 && newslideIndex > 0) {
currentSlide(newslideIndex);
}
}
// Pause
var playing = true;
var pauseButton = document.getElementById("pause");
function pauseSlideshow() {
var pauseButton = document.getElementById("pause");
pauseButton.innerHTML = "&#9656;";
playing = false;
clearInterval(interval);
}
function playSlideshow() {
pauseButton.innerHTML = "&#x23F8;";
playing = true;
interval = setInterval(showSlides, 5000);
}
pauseButton.onclick = function () {
if (playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};
</script>

我觉得你已经很接近了。通常，当javascript中出现问题时，一个很好的起点是在浏览器中使用Inspect Element选项，并查看控制台中是否存在任何错误。我在做这件事时注意到的第一件事是，当点击播放按钮时，控制台中出现了一个错误：

ReferenceError：找不到变量：interval

在pauseSlideshow()方法中引用。间隔似乎不是在playSlideshow()方法之外声明的，因此它在pauseSlideshow()方法中是不可访问的。包含var interval声明解决了这个问题。

当页面第一次加载时，您正在调用showSlides()方法，但这从来没有设置间隔(您希望在调用pauseSlideshow()方法时清除该间隔(，所以我建议添加一个调用playSlideshow()(以启动间隔(——因为我们在playSlideshow()中使用了pauseButton，所以我们也想先定义它。

我发现的另一个问题是，您在showSlides()方法的末尾调用了setTimeout(showSlides, 5000)。当从播放按钮调用showSlides时，这会导致多次调用showSlide，从而在尝试暂停它时造成额外的混乱。现在，当页面首次显示时，我们调用playSlideshow()以在showSlides()之后开始间隔，我们不需要在showSlides()方法结束时使用此额外的setTimeout(showSlides, 5000)。理想情况下不必首先显式调用showSlides()，但不幸的是，setInterval不是最干净的，并且在没有先显式函数调用的情况下首次启动时会延迟。

我已经包含了修改后的代码如下：

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var interval;
var pauseButton = document.getElementById("pause");
showSlides();
playSlideshow();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
}
// Manual control 
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no - 1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if (newslideIndex < 4 && newslideIndex > 0) {
currentSlide(newslideIndex);
}
}
// Pause
var playing = true;
function pauseSlideshow() {
var pauseButton = document.getElementById("pause");
pauseButton.innerHTML = "&#9656;";
playing = false;
clearInterval(interval);
}
function playSlideshow() {
pauseButton.innerHTML = "&#x23F8;";
playing = true;
interval = setInterval(showSlides, 5000);
}
pauseButton.onclick = function () {
if (playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato|Montserrat:700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
<script src="app.js" defer></script>
<title>GT</title>
</head>
<body>
<!-- Main Title Web page start  -->
<header>
<h1 class="banner">G-T</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Image Carousel</a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
Thanks for taking the time to stop by. Watch my journey as I learn to code
code.
<!-- Image Carousel with the play pause issue -->
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="images/photo-of-a-fish-on-corals-1522160.jpg" alt="Splash" style="width: 100%;" />
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="images/photo-of-a-turtle-underwater-847393 (1).jpg" alt="diving" style="width: 100%;"/>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="images/fish-in-water_opt.jpg" alt="Yellow and blue tang fish" style="width: 100%;" />
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<a type="button" id="pause">&#x23F8;</a>
</div>
<br />
<div style="text-align: center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</body>
</html>

相关内容

最新更新

热门标签：