Javascript 单击按钮之前,幻灯片不会显示第一个数组
Javascript Slideshow Won't Show First Array Until the Button is Clicked
除了最初加载页面时,我的幻灯片效果很好。我已经将我的 CSS 设置为 "display:none" 开始,然后 Javascript 循环遍历图像以在单击下一个按钮时将它们显示为内联块。但是,第一张图片显示为 "none" 开始。
我确定有一种方法可以只显示第一张图片,同时隐藏所有图片。我对此很陌生。
我在这里学习了 w3schools.com 上的教程:https://www.w3schools.com/howto/howto_js_slideshow.asp
你可以在我的代码笔上看到我的完整代码和产品:
https://codepen.io/catherinehh/pen/orpeJV
CSS:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
JAVASCRIPT:
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
if (n > slides.length){
slideIndex = 1;
}
if (n < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "inline-block";
}
我基本上是按照 w3schools.com 上的教程逐行学习的,我找不到我的代码与教程有什么不同。它应该 运行 就像该页面上的幻灯片一样。
感谢任何帮助!谢谢!
您忘记通过调用 showSlides(slideIndex)
来初始化滑块
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
if (n > slides.length){
slideIndex = 1;
}
if (n < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "inline-block";
}
showSlides(slideIndex)
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
<div class="wrapper">
<header>
<h1>Catherine Hill Hyman</h1>
<p>Professional Creations</p>
</header>
<main>
<section class="designSection">
<h2>Design</h2>
</section>
<section class="developmentSection">
<h2>Web Development</h2>
</section>
<section class="photoSection">
<h2>Photography</h2>
<!-- begin photo slideshow-->
<div class="photoSlideshow">
<button name="prevButt" onclick="nextSlide(-1)">❮</button>
<div class="slideImg">
<img id="uncleBud" src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/58378586_10157043937729774_1705977854832934912_n.jpg?_nc_cat=111&_nc_oc=AQl-LK_lpsqPa3rT2zTbc5KJpNNZECz9jxm15Xk0bNbYjtTklfxf34uVybG2xSjjffA&_nc_ht=scontent.fcae1-1.fna&oh=c5b64ef84d76c6d7ef2a9b9409e12637&oe=5DBFF07F"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/61008492_10157093314404774_1267282211523002368_o.jpg?_nc_cat=111&_nc_oc=AQldqecidxJd5LhQsCrYpnGnQ3mmLDqqMe9OGcChpmZyP82vSw7oBZvBDCZfbYktIGQ&_nc_ht=scontent.fcae1-1.fna&oh=c57a3d3827f6cab302470ec0e697f7ed&oe=5D88E446"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/59285770_10157043934564774_1801122100677705728_n.jpg?_nc_cat=107&_nc_oc=AQlfwDfzSUayQL0nmF9apZnwLzQJtIZw3KsWx2mM5P0O1x2q508-vo4lsCD6EfUD9ik&_nc_ht=scontent.fcae1-1.fna&oh=4948f8ea74480440b542e60d119e23a9&oe=5D7E8C45"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<button name="nextButt" onclick="nextSlide(1)">❯</button>
<script src="slideShow.js"></script>
</div>
<!-- end photo slideshow-->
</section>
<section class="writingSection">
<h2>Writing</h2>
</section>
</main>
如果你想让滑块在页面加载时开始工作,那么你可以在上面代码的末尾调用第一个幻灯片:
showSlides(slideIndex);
为了更有信心(因为我不知道你把脚本放在页面的什么地方,是在页眉中还是在 Body 标签之后)你可以使用 <body onload="showSlides(1)">
在页面加载完成后推迟滑块功能。
如果您希望首先显示第一张图片并在点击时启动滑块,请使用 CSS 规则排除隐藏的第一张图片:
.slideImg:first-of-type {
display: block;
}
除了最初加载页面时,我的幻灯片效果很好。我已经将我的 CSS 设置为 "display:none" 开始,然后 Javascript 循环遍历图像以在单击下一个按钮时将它们显示为内联块。但是,第一张图片显示为 "none" 开始。
我确定有一种方法可以只显示第一张图片,同时隐藏所有图片。我对此很陌生。
我在这里学习了 w3schools.com 上的教程:https://www.w3schools.com/howto/howto_js_slideshow.asp
你可以在我的代码笔上看到我的完整代码和产品: https://codepen.io/catherinehh/pen/orpeJV
CSS:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
JAVASCRIPT:
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
if (n > slides.length){
slideIndex = 1;
}
if (n < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "inline-block";
}
我基本上是按照 w3schools.com 上的教程逐行学习的,我找不到我的代码与教程有什么不同。它应该 运行 就像该页面上的幻灯片一样。
感谢任何帮助!谢谢!
您忘记通过调用 showSlides(slideIndex)
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
if (n > slides.length){
slideIndex = 1;
}
if (n < 1){
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "inline-block";
}
showSlides(slideIndex)
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
<div class="wrapper">
<header>
<h1>Catherine Hill Hyman</h1>
<p>Professional Creations</p>
</header>
<main>
<section class="designSection">
<h2>Design</h2>
</section>
<section class="developmentSection">
<h2>Web Development</h2>
</section>
<section class="photoSection">
<h2>Photography</h2>
<!-- begin photo slideshow-->
<div class="photoSlideshow">
<button name="prevButt" onclick="nextSlide(-1)">❮</button>
<div class="slideImg">
<img id="uncleBud" src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/58378586_10157043937729774_1705977854832934912_n.jpg?_nc_cat=111&_nc_oc=AQl-LK_lpsqPa3rT2zTbc5KJpNNZECz9jxm15Xk0bNbYjtTklfxf34uVybG2xSjjffA&_nc_ht=scontent.fcae1-1.fna&oh=c5b64ef84d76c6d7ef2a9b9409e12637&oe=5DBFF07F"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/61008492_10157093314404774_1267282211523002368_o.jpg?_nc_cat=111&_nc_oc=AQldqecidxJd5LhQsCrYpnGnQ3mmLDqqMe9OGcChpmZyP82vSw7oBZvBDCZfbYktIGQ&_nc_ht=scontent.fcae1-1.fna&oh=c57a3d3827f6cab302470ec0e697f7ed&oe=5D88E446"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/59285770_10157043934564774_1801122100677705728_n.jpg?_nc_cat=107&_nc_oc=AQlfwDfzSUayQL0nmF9apZnwLzQJtIZw3KsWx2mM5P0O1x2q508-vo4lsCD6EfUD9ik&_nc_ht=scontent.fcae1-1.fna&oh=4948f8ea74480440b542e60d119e23a9&oe=5D7E8C45"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<button name="nextButt" onclick="nextSlide(1)">❯</button>
<script src="slideShow.js"></script>
</div>
<!-- end photo slideshow-->
</section>
<section class="writingSection">
<h2>Writing</h2>
</section>
</main>
如果你想让滑块在页面加载时开始工作,那么你可以在上面代码的末尾调用第一个幻灯片:
showSlides(slideIndex);
为了更有信心(因为我不知道你把脚本放在页面的什么地方,是在页眉中还是在 Body 标签之后)你可以使用 <body onload="showSlides(1)">
在页面加载完成后推迟滑块功能。
如果您希望首先显示第一张图片并在点击时启动滑块,请使用 CSS 规则排除隐藏的第一张图片:
.slideImg:first-of-type {
display: block;
}