gpt4 book ai didi

javascript - 不会出现 CSS 幻灯片动画

转载 作者:太空宇宙 更新时间:2023-11-04 06:59:29 24 4
gpt4 key购买 nike

我通过将 W3 Schools 集成到我的网站之一来模拟幻灯片放映动画。幻灯片确实会在正确的时间发生变化,但 fade top/bot 命令似乎没有任何作用。我已经检查了我的 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>&copy; 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>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
</footer>

</body>

</html>

关于javascript - 不会出现 CSS 幻灯片动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52139893/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com