由 HTML 和 Javascript 制作的幻灯片答案

【问题标题】：Slideshow made from HTML and Javascript由 HTML 和 Javascript 制作的幻灯片
【发布时间】：2018-08-13 15:42:14
【问题描述】：

我是一名学习基本 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>

既然你已经阅读了我的代码，让我来解决我的幻灯片问题。

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

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

这就是为什么我在顶部的代码中包含了这一点：

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

我加入了这一点，试图找出为什么这些图像有点不稳定。所以基本上，当我按下开始按钮时， i 值也会显示。当我按下开始按钮时，变量 i 将显示为“1”，但图像、标题和标题标题不会改变。它将保留在 images[0]、title[0] 和 captitle[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;
}

【问题讨论】：

发布你的css，我可以运行你的例子
我编辑了我的帖子并将 CSS 代码放在了最底部。我认为即使没有 CSS 也是不言自明的。因为您可以清楚地看到，当您在按下开始按钮后按下下一个/上一个按钮时，它们会跳过/返回一张幻灯片，而不是我想要的。但我还是把 CSS 放进去
尝试一次只回答一个问题。您只能有一个接受的答案。如果您的解决方案分布在两个单独的答案中，则您无法在应计分的地方完全计分。
我有时间帮助你的一件事是你可能想要 setInterval 而不是 setTimeout("transition()", time); 并且它应该是 setInterval(transition, time); 注意 transition 没有引号和括号，否则你调用函数而不是告诉 setInterval/timeout 那是你想要调用的函数。此外，您应该在其自己的函数中调用 setInterval，因此您必须将“开始”按钮 onclick 更改为使用 setInterval 的新函数（并从 transition() 中删除 setTimeout）。这有助于解决开始时的一些奇怪问题

标签： javascript html arrays

【解决方案1】：

当您增加计数器和设置图像时，您需要保持一致。使用您的 transition 方法，您将设置图像然后递增。使用next 和previous，您可以进行递增和设置。所以你会得到跳过。

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

使用一个变量来保存转换的状态，并使用它来确定转换是否应该开始。我在下面使用了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>

【讨论】：