由HTML和Javascript制作的幻灯片

Question

我是一名学习基本的HTML / Javascript的学生，为了做家庭作业，我被分配从HTML / Javascript进行幻灯片演示。 我刚刚了解了数组，函数和变量，所以我对所有事物都是新手。

因此，对于此幻灯片放映任务，我必须放置两个按钮来启动/停止幻灯片放映，以及两个按钮转到幻灯片的下一张或上一张照片，当我按下一个/上一个按钮时，它应该转到下一张/上一张幻灯片，并停止播放幻灯片。

对于幻灯片，我使用数组根据幻灯片编号显示照片，标题和标题标题，以变量“ i”表示。

但是我的幻灯片放映遇到了一些问题。 我将代码粘贴到此处后再说明。 我使用了标签，所以没有外部Javascript文件。

请不要担心图像源，因为我已经整理了所有图像源，而且也不必担心该CSS文件。

这是我的代码：

 img { display: block; margin-left: auto; margin-right: auto; } h1 { font-family: Tahoma, Geneva, sans-serif } #captiontitle { color: blue; font-family: Impact, Charcoal, sans-serif; } #caption { font-family: "Comic Sans MS", cursive, sans-serif; } 

 <!DOCTYPE html> <html> <head> <title>HW: Slideshow</title> <link rel="stylesheet" href="slideshow.css"> </head> <body> <h1 align="center">Slideshow</h1> <h3 align="center">(Please note that the time transition between slides is one second. Thank you!)</h3> <img name="banner" width="800" height="400" class="center"> <h1 id="captiontitle" align="center"></h1> <figcaption id="caption" align="center"></figcaption> <button id="start" onclick="transition()">Start</button> <button id="stop" onclick="stoptransition()">Stop</button> <button id="next" onclick="nextphoto()">Next Photo</button> <button id="previous" onclick="previousphoto()">Previous Photo</button> <p id="firsti"></p> <p id="ivalue"></p> <p id="timevalue"></p> <script> //Images// var images = []; var i = 0; var time = 1000; images[0] = "img0.jpg"; images[1] = "img1.jpg"; images[2] = "img2.jpg"; images[3] = "img3.jpg"; images[4] = "img4.jpg"; images[5] = "img5.jpg"; var captitle = []; captitle[0] = "Image 0" captitle[1] = "Image 1" captitle[2] = "Image 2" captitle[3] = "Image 3" captitle[4] = "Image 4" captitle[5] = "Image 5" var cap = []; cap[0] = "This is the description of Image 0." cap[1] = "This is the description of Image 1." cap[2] = "This is the description of Image 2." cap[3] = "This is the description of Image 3." cap[4] = "This is the description of Image 4." cap[5] = "This is the description of Image 5." document.banner.src = images[i]; document.getElementById("caption").innerHTML = cap[i]; document.getElementById("captiontitle").innerHTML = captitle[i]; function transition(){ document.banner.src = images[i]; document.getElementById("caption").innerHTML = cap[i]; document.getElementById("captiontitle").innerHTML = captitle[i]; if(i < images.length - 1){ i = i + 1; } else { i = 0; } document.getElementById("ivalue").innerHTML = i; stopslideshow = setTimeout("transition()", time); } function stoptransition(){ clearTimeout(stopslideshow); document.getElementById("ivalue").innerHTML = i; } function nextphoto(){ if(i < images.length - 1){ i = i + 1; } else { i = 0; } document.banner.src = images[i]; document.getElementById("caption").innerHTML = cap[i]; document.getElementById("captiontitle").innerHTML = captitle[i]; document.getElementById("ivalue").innerHTML = i; clearTimeout(stopslideshow); } function previousphoto(){ i = i - 1; if(i < 0){ i = images.length - 1; } document.banner.src = images[i]; document.getElementById("caption").innerHTML = cap[i]; document.getElementById("captiontitle").innerHTML = captitle[i]; document.getElementById("ivalue").innerHTML = i; clearTimeout(stopslideshow); } </script> </body> </html> 

现在，您已经阅读了我的代码，现在让我解决幻灯片的问题。

第一次加载页面时，“下一个/上一个”按钮可以正常工作。 但是，当我按下开始按钮后，按下下一个/上一个按钮时，就会发生问题。

因此由于某种原因，当我按下开始按钮时，下一张幻灯片应该是图像[1]，cap [1]和captitle [1]，但不会立即出现。 它从图像[0]，标题[0]和标题[0]开始。 不过，有趣的是，根据我按下的按钮，我的变量i正确地增加/减少了，但是图像并没有按照我希望的那样增加/减少。

这就是为什么我在顶部的代码中包含以下内容的原因：

 <p id="firsti"></p> <p id="ivalue"></p> <p id="timevalue"></p> 

我把那一点包括在内，以试图找出为什么图像有点古怪。 因此，基本上，当我按下开始按钮时，i值也会显示。 按下“开始”按钮时，变量i将显示为“ 1”，但是图像，字幕和字幕标题不会更改。 它将保留在图像[0]，标题[0]和标题[0]处。

就像我上面说的，另一个奇怪的问题是按下开始/停止按钮后的下一个/上一个按钮。 当我按下下一个按钮时，显示屏将跳过前一张幻灯片，而不是跳到下一个幻灯片；对于上一个按钮，它会比我想要的多退回一张幻灯片。

最后，我遇到的另一个错误是，当我多次按“开始”时，该函数运行会重复按我的次数，并且会迅速跳过幻灯片。 我不知道如何使启动功能仅工作一次。 我尝试了很多事情，但是都没有成功。

很长的时间，很抱歉，但是老实说，我被卡住了，我已经很接近完成此幻灯片放映任务了，但是我遇到了一些错误。

感谢帮助。 谢谢！

编辑：有人问我的CSS，所以我把它放在这里：

 img { display: block; margin-left: auto; margin-right: auto; } h1 { font-family: Tahoma, Geneva, sans-serif } #captiontitle { color: blue; font-family: Impact, Charcoal, sans-serif; } #caption { font-family: "Comic Sans MS", cursive, sans-serif; } 

Answer 1

递增计数器并设置图像时，需要保持一致。 使用transition方法时，您要先设置图像然后递增。 使用next和previous next ，您将进行增量和设置。 因此，您将跳过。

您还应该在手动前进或后退之前停止过渡。

使用变量保存过渡状态，并使用该变量确定过渡是否应该开始。 我在下面使用了transitionStarted 。 您会注意到，现在有一种方法可以显式启动过渡，而实际上可以运行过渡。

如果还通过使用JSON表示法使用对象数组并减少重复代码来优化代码。 这将使您迈出基本对象的第一步。

 var i = 0; var time = 1000; var banner = document.banner; var imageTitle = document.getElementById("captiontitle"); var imageCaption = document.getElementById("caption"); var slideShowInterval; var transitionStarted = false; var imageObj = [{ "src": "https://www.fillmurray.com/800/400", "title": "Title 0", "Description": "Description 0" }, { "src": "http://www.placecage.com/800/400", "title": "Title 1", "Description": "Description 1" }, { "src": "http://www.placecage.com/g/800/400", "title": "Title 2", "Description": "Description 2" }, { "src": "http://www.placecage.com/c/800/400", "title": "Title 3", "Description": "Description 3" }, { "src": "http://www.placecage.com/gif/800/400", "title": "Title 4", "Description": "Description 4" }, { "src": "https://www.fillmurray.com/g/800/400", "title": "Title 5", "Description": "Description 5" } ]; setImage(imageObj[i]); function setImage(imageObject) { banner.src = imageObject.src; imageTitle.innerHTML = imageObject.title; imageCaption.innerHTML = imageObject.Description; } function startTransition() { if(!transitionStarted){ transition(); transitionStarted = true; } } function transition() { if (i < imageObj.length - 1) { i++; } else { i = 0; } setImage(imageObj[i]); document.getElementById("ivalue").innerHTML = i; slideShowInterval = setTimeout("transition()", time); } function stoptransition() { clearInterval(slideShowInterval); document.getElementById("ivalue").innerHTML = i; transitionStarted = false; } function nextphoto() { stoptransition(); if (i < imageObj.length - 1) { i = i + 1; } else { i = 0; } setImage(imageObj[i]); } function previousphoto() { stoptransition(); i = i - 1; if (i < 0) { i = imageObj.length - 1; } setImage(imageObj[i]); } 

 img { display: block; margin-left: auto; margin-right: auto; } h1 { font-family: Tahoma, Geneva, sans-serif } #captiontitle { color: blue; font-family: Impact, Charcoal, sans-serif; } #caption { font-family: "Comic Sans MS", cursive, sans-serif; } 

 <h1 align="center">Slideshow</h1> <h3 align="center">(Please note that the time transition between slides is one second. Thank you!)</h3> <img name="banner" width="800" height="400" class="center"> <h1 id="captiontitle" align="center"></h1> <figcaption id="caption" align="center"></figcaption> <button id="start" onclick="startTransition()">Start</button> <button id="stop" onclick="stoptransition()">Stop</button> <button id="next" onclick="nextphoto()">Next Photo</button> <button id="previous" onclick="previousphoto()">Previous Photo</button> <p id="firsti"></p> <p id="ivalue"></p> <p id="timevalue"></p>