JavaScript 自动幻灯片放映

Question

我正在创建一个幻灯片图片库。任何人都可以建议为什么它不起作用，因为没有出现错误。

window.onload = (runGallery);
let images = 
["images/gallery1.jpg","images/gallery2.jpg","images/gallery3.jpg","images/gallery4.jpg"];
let index = 0;

function slideShow(x){
    index += x;
//restart when on last image
if(index > images.length -1)
{
    index = 0;
}
if(index < 0)
{
    index = images.length -1;
}
document.getElementsByClassName("imgSlide").src = images[index];


}

function runGallery(){
setInterval(slideShow(1), 2000);
}

画廊的 HTML 如下 =

<section id="aboutSection">
        <div id="aboutpage">
            <h2>About Study Space</h2>
            <div id="aboutpageContent">

                <div class="aboutUsDivs" id="aboutUS"> 
                    <h3>About US</h3>
                    <p>Welcome to Study Space is a website created to help people with the struggles of studying and working from home.</p>
                    <p>Our website will give you tips and tricks for working & studying effectively from home!</p>
                    <p>Study Space allows you to look at user-given feedback from their experience, which shows what worked well for them and what did not.</p>
                </div>

                <div class="aboutUsDivs" id="ourGoal">
                    <h3>Our Goal</h3>
                    <p>Our goal is help people work and study as effectively from home by giving them all the needed information and tips and tricks.</p>
                    <p>We also want to create a community of like-minded individuals that work and study the same.</p>
                    <p>Our hope from this is that you the people can help one another out.</p>
                    <p></p>
                </div>
            </div>
            <br>
            <div id="galleryContainer">
                <div id="slide">
                    <img class="imgSlide" src="images/gallery1.jpg" alt=""/>
                   <!-- <img class="imgSlide" src="images/gallery2.jpg" alt=""/>
                    <img class="imgSlide" src="images/gallery3.jpg" alt=""/>
                    <img class="imgSlide" src="images/gallery4.jpg" alt=""/>-->
                </div>

            </div>     
    </section>

我希望这只是一个小错误，但现在已经坚持了很多年了。如果有人可以帮忙谢谢。CSS =

#galleryContainer {
border: 2px solid #000d1a;
width: 800px;
height: 400px;
margin: auto;
overflow: hidden;

}
#slide img{ 
width: 100%;
height: 500px;
}
#slide{
display: flex;
width: 100%;
height: 500px;       
}

如何制作更小的片段？它有很多代码，也许截屏会更容易？

Answer 1

稍微更改了您的代码，现在它可以工作了。实际上，您需要更改“getElementsByClassName”返回的数组中第一个元素的来源。希望对您有所帮助。

<section id="aboutSection">
	<div id="aboutpage">
		<h2>About Study Space</h2>
		<div id="aboutpageContent">

			<div class="aboutUsDivs" id="aboutUS"> 
				<h3>About US</h3>
				<p>Welcome to Study Space is a website created to help people with the struggles of studying and working from home.</p>
				<p>Our website will give you tips and tricks for working & studying effectively from home!</p>
				<p>Study Space allows you to look at user-given feedback from their experience, which shows what worked well for them and what did not.</p>
			</div>

			<div class="aboutUsDivs" id="ourGoal">
				<h3>Our Goal</h3>
				<p>Our goal is help people work and study as effectively from home by giving them all the needed information and tips and tricks.</p>
				<p>We also want to create a community of like-minded individuals that work and study the same.</p>
				<p>Our hope from this is that you the people can help one another out.</p>
				<p></p>
			</div>
		</div>
		<br>
		<div id="galleryContainer">
			<div id="slide">
				<img class="imgSlide" src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Fmedium_2x%2Fpublic%2F1444769948%2FLONDON1015-the-national-portrait-gallery.jpg%3Fitok%3DvNi8qLUS" alt=""/>
			</div>

		</div>     
</section>
<script>
	let images = ["https://kinsta.com/wp-content/uploads/2018/02/wordpress-photo-gallery-plugins.png","https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fcdn-image.travelandleisure.com%2Fsites%2Fdefault%2Ffiles%2Fstyles%2Fmedium_2x%2Fpublic%2F1444769948%2FLONDON1015-the-national-portrait-gallery.jpg%3Fitok%3DvNi8qLUS"];
	let index = 0;

	function slideShow(x){
		index += x;
		//restart when on last image
		if(index > images.length -1)
		{
			index = 0;
		}
		if(index < 0)
		{
			index = images.length -1;
		}
		
		document.getElementsByClassName("imgSlide")[0].src = images[index];
	}

	document.addEventListener('DOMContentLoaded', function() {
		setInterval(function(){slideShow(1);}, 2000);
	});
</script>