我正在尝试将三张图片幻灯片放入div框中。我正在尝试此代码，但它不起作用。我的目标是将幻灯片显示为div框中的第一个内容。我对HTML很新，我对此并不擅长。任何帮助表示赞赏。我找到的代码是W3Schools的幻灯片放映，这里是链接，所以你可以知道我想要实现的目标，
https://www.w3schools.com/howto/howto_js_slideshow.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #252525;
margin: 0;
font-family: ultra;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: ultra;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #2E86C1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #2E86C1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .search-container {
float: right;
}
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.navbar .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background:;
font-size: 17px;
border: none;
cursor: pointer;
}
.navbar .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.navbar .search-container {
float: none;
}
.navbar a,
.navbar input[type=text],
.navbar .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.navbar input[type=text] {
border: 1px solid #ccc;
}
}
.header {
background-color: #252525;
padding: 5px;
text-align: center;
color: blue;
margin 0;
}
h1 {
color: #2E86C1;
font-size: 60px;
font-family: ultra;
}
.header img{
float:left;
}
.rcorners1 {
margin: 50px auto;
padding-top: 100px;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height:;
}
.text2{
font-size:25px
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
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: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="header">
<img src="Untitled-2.png" alt="M" width="80" height="80" />
<h1>World Vector Control</h1>
</div>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">About</a>
<div class="dropdown">
<button class="dropbtn">
Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">The Problem</a>
<a href="#">The Solution</a>
</div>
</div>
<a href="#FAQ">FAQ</a>
<div class="dropdown">
<button class="dropbtn">
Contact Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Donate</a>
<a href="#">Get Invovled</a>
</div>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
<div class="rcorners1">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<img src="Ghostbusters-logo.png" class="expand" width="" height="600" alt=""/>
</a>
<div class="text2">World Vector Control is a not-for-profit initiative that works to protect the global community from mosquito-borne diseases such as malaria. We introduce Wolbachia into Aedes albopictus (Asian Tiger) mosquitoes, the primary vector of this virus. Wolbachia are naturally occurring bacteria found in 60% of all insect species, and are safe for human, animals and the environment.</div>
<div class="text2">Once mosquitoes with Wolbachia are released, they breed with wild mosquitoes and over time, the majority of mosquitoes carry Wolbachia. These mosquitoes have a reduced ability to transmit viruses to people, decreasing the risk of malaria outbreaks.</div>
<div class="text2">We are currently operating in its home labratory in Canada. We have grown from a small comapny with a dream to a company large enough to start making a differecne in the world.</div>
<div class="text2">We use a uniquely self-sustaining method that does not pose risk to existing ecosystems, and has the potential to transform the global fight against life-threatening viral diseases.</div>
<div class="text2">Following years of laboratory research with promising results, our approach has started to gain widespread support from communities, governments and regulators. We are now working to make our approach more affordable and effective for use in at-risk communities around the world.</div>
</div>
</div>
</div>
</html>