我正在创建幻灯片图像库。谁能提出建议,为什么它不起作用,因为没有错误出现。
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 for Gallery =
<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;
}
您如何制作较小的片段?它的很多代码也许会更容易抓屏?
答案 0 :(得分: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>