我正在尝试将幻灯片功能（使用W3schools howto）实现到网页中。但是，我仍然在我的代码的第3行和第22行收到错误“无法读取null javascript的属性'长度”。
我已经尝试在第21行实现if（slides.length！= 0 null）的检查，但似乎没有解决问题。我的问题是如何启动并运行幻灯片？
JS：
//Home Page Slides
var j=1; //The index of the slides
showSlides(j);
//Next/Prev controls
function plusSlides(n)
{
showSlides(j+=n);
}
//Thumbnail image controls
function currentSlide(n)
{
showSlides(j=n);
}
//Main function defenition
function showSlides(n)
{
var i;
slides=document.getElementById("homeSlides");
var dots=document.getElementById("dot");
//if(slides.length!=null)
if(n>slides.length)
{
j=1
}
if(n<1)
{
j=slides.length
}
for(i=0;i<dots.length;i++)
{
dots[i].className=dots[i].className.replace(" active,","");
}
slides[j-1].style.display="block";
dots[j-1].className+="active";
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Art Block 51 Home Page</title>
<link rel="stylesheet" type="text/css" href="ArtBlock51.css">
<script src="ArtBlock51.js"></script>
</head>
<body>
<div>
<header>
<section id="topOfPageColor">
<h1 class="pageBannerText" style="font-family:cambria;">Art Block 51</h1>
<nav>
<a href="ArtBlock51.html" class="navigationButton homePageButton">Home</a>
<a href="ArtBlock51_Products.html" class="navigationButton productsPageButton">Products</a>
<a href="ArtBlock51_ContactUs.html" class="navigationButton contactUsPageButton">Contact Us</a>
<a href="ArtBlock51_Cart.html" class="navigationButton CartPageButton">Cart</a>
</nav>
</section>
</header>
</div>
<!--The slideshow container and images-->
<div class="slideshowContainer">
<div class="homeSlides fade">
<img src="images/test1.jpg" style="width:100%">
</div>
<div class="homeSlides fade">
<img src="images/test2.jpg" style="width:100%">
</div>
<div class="homeSlides fade">
<img src="images/test3.jpg" style="width:100%">
</div>
</div>
<br>
<!--Dot buttons-->
<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>
<div>
<section id="bottomofPageColor">
</section>
</div>
</body>
</html>
CSS：
.navigationButton
{
background:#78bfa2;
border:none;
color:white;
padding:15px 32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:4px 2px;
cursor:pointer;
}
.pageBannerText
{
position: absolute;
left:500px;
color:white;
font-size:40px;
}
.homePageButton
{
position:absolute;
left: 500px;
top:100px;
}
.productsPageButton
{
position:absolute;
left: 620px;
top: 100px;
}
.contactUsPageButton
{
position:absolute;
left:760px;
top:100px;
}
.CartPageButton
{
position:absolute;
left:920px;
top:100px;
}
#topOfPageColor
{
background-color:#6fb79a;
height:22%;
position:absolute;
top:0;
left:0;
width:100%;
}
#bottomofPageColor
{
background-color:#6fb79a;
height:10%;
position:absolute;
top:100;
left:0;
bottom:0;
width:100%;
}
/*.scrollBar
{
background-color:white;
height:100%;
width:100%;
overflow-y:scroll;
}*/
/*Including padding and border in all the elements total width and height*/
*{box-sizing:border-box}
.slideshowContainer
{
max-width:1000px;
position:relative;
margin:auto;
}
/*Hide images my default*/
.homeSlides
{
display:none;
}
/*The dots*/
.dots
{
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;
}
/*Animation of the opacity utilizing key frames*/
@-webkit-keyframes fade
{
from{opacity:.4}
to{opacity:1}
}
@keyframes fade
{
from{opacity:.4}
to{opacity:1}
}
变量幻灯片未定义，因此您无法在其上调用长度。所以你的if检查应该是：
//Checks if slides is null
if(slide){
...
}
幻灯片未定义的原因是因为您的HTML不包含id为“homeSlides”的元素，因此document.getElementById（“homeSlides”）不会返回任何内容。
我认为你要调用的函数是：document.getElementsByClassName("homeSlides");这将返回所有带有“homeSlides”类的元素
我给你一个由slides=document.getElementById("homeSlides");取代slides=document.getElementsByClassName("homeSlides");的提示
slides=document.getElementById("homeSlides");用于从id中检索。但是你的家庭滑梯是一个班级。将其更改为id如下：
<div id="homeSlides fade">
它会起作用。