我很抱歉再次尝试这个问题，但我是一个初学者，所以我太慢了，不知道如何发布我的完整代码，我的帖子被关闭了。我想添加一个按钮来控制这个幻灯片在javascript。我接受了我之前的帖子中提出的建议，但我仍然没有得到它的工作。按钮有一个控件类名。在这里，我已经在jsfiddle上发布了我的完整代码。希望有人能帮助我得到这个启动/停止按钮工作。提前感谢!
https://jsfiddle.net/tamtamToronto/eqk4rLus/9/, togetherjs = R9ecgotDoP
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
clearInterval(slideInterval);
}
var playing = false;
var playButton = document.getElementById('play');
function playSlideshow() {
playButton.innerHTML = '►'; // pause character
playing = false;
slideInterval = setTimeout(showSlides, 2000);
}
function pauseSlideshow() {
playButton.innerHTML = '❚❚'; // play character
playing = true;
clearInterval(slideInterval);
}
pauseButton.onclick = function () {
if (playing) { pauseSlideshow(); }
else { playSlideshow(); }
};
</script>```
下面是一个例子:
var slideIndex = 0;
var playing = true;
var playButton = document.getElementById('play');
showSlides();
function showSlides() {
if(playing) {
var i;
var slides = document.getElementsByClassName("mySlides");
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, 2000); // Change image every 2 seconds
}
}
function toggleSlideshow() {
if(playing) {
playButton.innerHTML = '❚❚'; // pause character
playing = false;
} else {
playButton.innerHTML = '►'; // play character
playing = true;
showSlides();
}
}
playButton.addEventListener('click', toggleSlideshow);<style>
* {
margin: 0 !important;
padding: 0 !important;
border: 1px;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body, h1, h2 {
margin: 0;
padding: 0;
overflow: auto;
}
.mySlides {
display: none;
margin: 0;
padding: 0;
}
img {
vertical-align: middle;
margin: 0;
padding: 0;
}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.quote {
color: red;
font-size: 3.5vw;
font-family: garamond, perpetua, 'Times New Roman', Times, serif;
margin: 0;
}
.attribute {
color: red;
font-size: 2vw;
padding-top: 5px;
top: 0;
text-align: right;
font-family: garamond, perpetua, 'Times New Roman', Times, serif;
font-style: italic;
margin: 0;
}
.quoteboxlf {
width: 55%;
padding: 5%;
top:0px;
text-align: left;
position: absolute;
margin: 0;
}
.quoteboxrt {
width: 55%;
padding-top: 5%;
top:0px;
text-align: left;
position: absolute;
left: 40%;
margin: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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: 400px) {
.attribute {
font-size: 2.5vw;
}
}
</style><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.jpg" style=width:100% alt="1">
<div class="quoteboxlf">
<div class="quote">1 Dummy text here here.
</div>
<div class="attribute">Name goes here</div>
</div>
</div>
<div class="mySlides fade">
<img src="2.jpg" style=width:100% alt="2">
<div class="quoteboxrt">
<div class="quote">2 Dummy text here here.
</div>
<div class="attribute">Name goes here</div>
</div>
</div>
<div class="mySlides fade">
<img src="3.jpg" style=width:100% alt="3">
<div class="quoteboxrt">
<div class="quote">3 Dummy text here here.
</div>
<div class="attribute">Name goes here</div>
</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button class="controls" id="play">►</button>
</body>
</html>您可以使用HTML代码控制carousel，并使用bootstrap类进行设计
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
使用bootstrap for carousel
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
</body>
</html>