由HTML和Javascript

时间：2018-03-05 21:24:05

标签： javascript html arrays

我是一名学习基本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]，上限[1]和后悔[1]）不会立即出现。它从图像[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]。

另一个奇怪的问题，就像我上面说的那样，是按下开始/停止按钮后的下一个/上一个按钮。当我按下下一个按钮时，显示屏会向前跳过一张幻灯片，而不是转到下一张按钮，而对于上一个按钮，它会再往前一张幻灯片，而不是我喜欢的那张。

最后，我遇到的另一个问题是，当我按下Start多次时，该功能会在按下它时重复多次，并且会快速跳过幻灯片。我不知道如何使启动功能只工作一次。我尝试了很多东西，但没有一个能奏效。

这很长，我很抱歉，但老实说我很困难，而且我已经接近完成这个幻灯片任务了，但我遇到了几个错误。

帮助表示赞赏。谢谢！

编辑：有人问我的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;
}

1 个答案:

答案 0 :(得分：0)

增量计数器并设置图像时，需要保持一致。使用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>

相关问题
最新问题