我正在通过将W3 Schools放到我的网站中来模拟幻灯片动画。幻灯片确实在正确的时间发生了变化，但是淡出顶部/机器人命令似乎没有任何作用。我已经检查了我的div和javascript，但尝试模仿某些东西并将其翻译到我的网站中时会遇到欺骗
我的动画标注是否有问题，或者可能是什么问题？
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
<li><a href="theory.html" id="a">Theory</a></li>
<li><a href="more.html" id="a">More</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>最佳答案
在javascript中，您使用的类名是mySlides
var x = document.getElementsByClassName("mySlides");
但是在HTML中，您使用的类名称为
slides在任一侧进行更改，它将开始工作。
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2550);
}body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
}
header a:hover {
color: #fffffff;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('');
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
<li><a href="theory.html" id="a">Theory</a></li>
<li><a href="more.html" id="a">More</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="w3-content w3-section" style="max-width:500px">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
<img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">
</div>
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
</body>
</html>