因此，我在Web设计方面还是一个新手，我正在努力寻找解决此问题的方法。这是CSS和HTML代码。当图像不被div夹住时，这些图像可以工作，我也尝试来回更改图像的目录...
* {
box-sizing: border-box
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #C0C0C0;
color: #020F20;
margin-top: 0px;
margin-bottom: 0px;
}
a {
text-decoration: none;
color: #020F20;
font-weight: bold;
}
a:hover {
color: #F5F49E;
background-color: #020F20;
}
a:visited {}
#container {
width: 960px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
#header {
background-image: url('header.jpg');
height: 150px;
font-size: 48px;
font-weight: bold;
font-style: italic;
padding-right: 90px;
padding-left: 72px;
}
.nav {
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 1px;
border-bottom-width: 50px;
border-top-color: #000000;
border-bottom-color: #000000;
padding: 8px;
background-color: #F5F49E;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.nav a:active {
background-color: #F5F49E;
color: white;
}
#content-area {
padding: 24px;
}
#page-title {
font-size: 28px;
text-decoration: underline;
font-weight: bold;
}
#page {
padding: 16px;
text-align: justify;
}
#footer {
background-image: url('footer.jpg');
height: 40px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #000000;
text-align: center;
font-size: 12px;
padding-top: 8px;
}
.mySlides {
display: none;
}
.img {
vertical-align: middle;
}
/* This Is For Slide Show Container*/
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* This Is For The Next & Previous Buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 30%;
width: auto;
padding: 16px;
margin-top: 50px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* This Is To Position The Next Button To The Right & Vice Versa */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* This Is For The On Hover, We Are Going To Add Background Color As Black */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8)
}
/* This Is For The Caption Text Under The Image Display */
.text {
color: gold;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
font-weight: bold;
}
/* This Is For The Number Of The Picture In The Slideshow */
.numbertext {
color: #f2f2fF2;
font-size: 12px;
padding: 8px 12px;
position: :absolute;
top: 0;
}
/* This Is For The Dots/Bullets/Indicators When The Images Moved To Next Images */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 1 2px;
background-color: #bbb;
border-radius: 50px;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading Animation where webkit is being used for frames animation. Webkit is a rendering engine for browsers like chrome/safari. Other browsers use different
rendering engine, if the browser won't run your rendering engine, it will just ignore it */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keygframes-fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keygframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* When on smaller screens, decrease the size */
@media only screen and (max-width:300px) {
.prev,
.next,
.text {
font-size: 11px
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhmtl1-transiotional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><br/>Extreme Sports</div>
<div class="nav">
<a class="active" href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Activities</a>
<a href="#">Event</a>
<a href="#">Photos</a>
<a href="#">Contact Us</a>
</div>
<div id="content-area">
<div id="page-title">Page Title</div><br/><br/>
<div id="page-content">
<div style="margin:8px;" class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/3</div>
<img alt="" height="350" src="Images/img_snow_wide.jpg" width="100%" />
<div class="text">My Fruits</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/3</div>
<img alt="nature wide" height="350" src="Images/img_nature_wide.jpg" style="width:100%" />
<div class="text">My Wallpaper</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/3</div>
<img alt="" height="350" src="Images/img_nature_wide.jpg" width="100%" />
<div class="text">My Nature</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❮</a>
</div>
<br/><br/><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 type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(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>
<br/><br/>
<div id="page-article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id maximus enim. Ut tincidunt velit eu euismod fermentum. Sed lorem lorem, euismod ac venenatis quis, sollicitudin at nulla. Aenean eleifend ullamcorper orci. Sed at sagittis est. Aenean sollicitudin
arcu id mauris dapibus lacinia. Praesent sed erat vitae arcu suscipit tempus eu ac lacus. In rhoncus est felis, ornare sagittis turpis egestas sollicitudin. In non sapien pellentesque lectus pretium faucibus. Integer eget sollicitudin velit.
Curabitur eget nunc blandit, maximus lacus quis, congue ipsum. Nam varius hendrerit venenatis.<br/><br/> Morbi hendrerit velit mollis, efficitur nisi imperdiet, vehicula sapien. Aliquam diam orci, ornare ut luctus vitae, faucibus vel
purus. Mauris auctor pellentesque lacus. Maecenas porttitor felis nec nulla vulputate, ut commodo nunc scelerisque. Sed luctus vitae elit tempor porttitor. Morbi consectetur ante iaculis erat bibendum, eget viverra nunc rutrum. Phasellus placerat,
lorem consequat ultrices auctor, dui nunc imperdiet justo, a facilisis elit lacus nec mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br/><br/> Pellentesque aliquam, diam quis pulvinar mattis, sem neque tristique erat, a tincidunt
elit nisi et est. Duis lorem ipsum, pulvinar eu eros eu, feugiat luctus diam. Cras eget molestie massa. Quisque quis mi quis urna interdum bibendum. Pellentesque at leo varius, placerat ipsum sed, convallis tortor. Integer ut volutpat lorem,
in efficitur nisl. Sed augue est, vulputate vitae tortor sit amet, molestie ultrices diam. In eget elit urna. Aliquam tincidunt tempor sollicitudin. Phasellus ac elit a risus mattis iaculis id id erat. Sed a mauris in tellus porttitor ornare.
Pellentesque eget porttitor dui. Duis posuere, dui eu mollis varius, quam diam elementum velit, nec dignissim magna justo ut tellus.<br/><br/>
</div>
</div>
<div id="footer">Created By Alex, 2020<br/>Last Updated 01012020</div>
</div>
</div>
</body>
</html>
请不要理会这些描述，这些只是我自己的注释。
答案 0 :(得分：0)
看起来您的代码中有错别字。我修改了标记为// HERE的函数：
* {
box-sizing: border-box
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #C0C0C0;
color: #020F20;
margin-top: 0px;
margin-bottom: 0px;
}
a {
text-decoration: none;
color: #020F20;
font-weight: bold;
}
a:hover {
color: #F5F49E;
background-color: #020F20;
}
a:visited {}
#container {
width: 960px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
#header {
background-image: url('header.jpg');
height: 150px;
font-size: 48px;
font-weight: bold;
font-style: italic;
padding-right: 90px;
padding-left: 72px;
}
.nav {
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 1px;
border-bottom-width: 50px;
border-top-color: #000000;
border-bottom-color: #000000;
padding: 8px;
background-color: #F5F49E;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.nav a:active {
background-color: #F5F49E;
color: white;
}
#content-area {
padding: 24px;
}
#page-title {
font-size: 28px;
text-decoration: underline;
font-weight: bold;
}
#page {
padding: 16px;
text-align: justify;
}
#footer {
background-image: url('footer.jpg');
height: 40px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #000000;
text-align: center;
font-size: 12px;
padding-top: 8px;
}
.mySlides {
display: none;
}
.img {
vertical-align: middle;
}
/* This Is For Slide Show Container*/
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* This Is For The Next & Previous Buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 30%;
width: auto;
padding: 16px;
margin-top: 50px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* This Is To Position The Next Button To The Right & Vice Versa */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* This Is For The On Hover, We Are Going To Add Background Color As Black */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8)
}
/* This Is For The Caption Text Under The Image Display */
.text {
color: gold;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
font-weight: bold;
}
/* This Is For The Number Of The Picture In The Slideshow */
.numbertext {
color: #f2f2fF2;
font-size: 12px;
padding: 8px 12px;
position: :absolute;
top: 0;
}
/* This Is For The Dots/Bullets/Indicators When The Images Moved To Next Images */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 1 2px;
background-color: #bbb;
border-radius: 50px;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading Animation where webkit is being used for frames animation. Webkit is a rendering engine for browsers like chrome/safari. Other browsers use different
rendering engine, if the browser won't run your rendering engine, it will just ignore it */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keygframes-fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keygframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* When on smaller screens, decrease the size */
@media only screen and (max-width:300px) {
.prev,
.next,
.text {
font-size: 11px
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhmtl1-transiotional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><br/>Extreme Sports</div>
<div class="nav">
<a class="active" href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Activities</a>
<a href="#">Event</a>
<a href="#">Photos</a>
<a href="#">Contact Us</a>
</div>
<div id="content-area">
<div id="page-title">Page Title</div><br/><br/>
<div id="page-content">
<div style="margin:8px;" class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/3</div>
<img alt="" height="350" src="Images/img_snow_wide.jpg" width="100%" />
<div class="text">My Fruits</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/3</div>
<img alt="nature wide" height="350" src="Images/img_nature_wide.jpg" style="width:100%" />
<div class="text">My Wallpaper</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/3</div>
<img alt="" height="350" src="Images/img_nature_wide.jpg" width="100%" />
<div class="text">My Nature</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❮</a>
</div>
<br/><br/><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 type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) { // HERE
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) { // HERE
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>
<br/><br/>
<div id="page-article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id maximus enim. Ut tincidunt velit eu euismod fermentum. Sed lorem lorem, euismod ac venenatis quis, sollicitudin at nulla. Aenean eleifend ullamcorper orci. Sed at sagittis est. Aenean sollicitudin
arcu id mauris dapibus lacinia. Praesent sed erat vitae arcu suscipit tempus eu ac lacus. In rhoncus est felis, ornare sagittis turpis egestas sollicitudin. In non sapien pellentesque lectus pretium faucibus. Integer eget sollicitudin velit.
Curabitur eget nunc blandit, maximus lacus quis, congue ipsum. Nam varius hendrerit venenatis.<br/><br/> Morbi hendrerit velit mollis, efficitur nisi imperdiet, vehicula sapien. Aliquam diam orci, ornare ut luctus vitae, faucibus vel
purus. Mauris auctor pellentesque lacus. Maecenas porttitor felis nec nulla vulputate, ut commodo nunc scelerisque. Sed luctus vitae elit tempor porttitor. Morbi consectetur ante iaculis erat bibendum, eget viverra nunc rutrum. Phasellus placerat,
lorem consequat ultrices auctor, dui nunc imperdiet justo, a facilisis elit lacus nec mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br/><br/> Pellentesque aliquam, diam quis pulvinar mattis, sem neque tristique erat, a tincidunt
elit nisi et est. Duis lorem ipsum, pulvinar eu eros eu, feugiat luctus diam. Cras eget molestie massa. Quisque quis mi quis urna interdum bibendum. Pellentesque at leo varius, placerat ipsum sed, convallis tortor. Integer ut volutpat lorem,
in efficitur nisl. Sed augue est, vulputate vitae tortor sit amet, molestie ultrices diam. In eget elit urna. Aliquam tincidunt tempor sollicitudin. Phasellus ac elit a risus mattis iaculis id id erat. Sed a mauris in tellus porttitor ornare.
Pellentesque eget porttitor dui. Duis posuere, dui eu mollis varius, quam diam elementum velit, nec dignissim magna justo ut tellus.<br/><br/>
</div>
</div>
<div id="footer">Created By Alex, 2020<br/>Last Updated 01012020</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
在下一行中，未定义滑动元素。尝试将其更改为slides.length：
if (n > slides.length) {slideIndex = 1}