HTML/JavaScript:为什么不'我的纽扣坏了

HTML/JavaScript: Why don't my buttons work?

本文关键字：我的 坏了 JavaScript 为什么不 HTML      更新时间：2023-09-26

我为一个5张图片的幻灯片写了一个代码，NEXT和PREVIOUS按钮应该带你进入下一张和上一张幻灯片，但当我按下它们时，什么都没发生。有人能帮我吗一些更详细一些更详细的一些更多详细一些更多详细

var slideShow = [];
function newImage(source, caption) {
  var pic = new Object();
  pic.src = source;
  pic.cap = caption;
  return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
  i = (i + 1);
  if (i == 5)
    i = 0;
  document.getElementById("picture").innerHTML = '<img src= ' +
    slideshow[i].src + ' id="images" height="100%"' +
    ' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
  if (i == -1)
    i = 4;
  else
    i = (i - 1);
  document.getElementById("picture").innerHTML = '<img src= ' +
    slideshow[i].src + ' id="images" height="100%"' +
    ' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
#picture {
  width: 200px;
  margin-left: 50;
  margin-right: auto;
}
div.buttons {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
div.info {
  width: 500px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid purple;
}
button {
  font-size: 12px;
}
button.left {
  auto;
  margin-right: 418px;
}
p {
  text-align: center;
}
<h3>Project 2: Slide Show</h3>
<h4>I do not own any of the following pictures</h6>
<h4>All pictures acquired online, unknown owners</h4>
<br />
<div id="picture">
  <img src="slideshow1.jpg" id="images" alt="my picture" height="200 px">
  <p>The Happy Cat</p>
</div>
<div class="buttons">
  <button class="left" onClick="prevPic()">PREVIOUS</button>
  <button onClick="nextPic()">NEXT</button>
</div>

1）幻灯片中的打字显示

2） 不相关，但你不能有重复的id，而是使用类

            var slideshow = [];
            function newImage(source, caption) {
              var pic = new Object();
              pic.src = source;
              pic.cap = caption;
              return pic;
            }
            slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
            slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
            slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
            slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
            slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
            var i = 0;
            function nextPic() {
              i = (i + 1);
              if (i == 5)
                i = 0;
              document.getElementById("picture").innerHTML = '<img src= ' +
                slideshow[i].src + ' class="images" height="100%"' +
                ' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
            }
            function prevPic() {
              if (i == -1)
                i = 4;
              else
                i = (i - 1);
              document.getElementById("picture").innerHTML = '<img src= ' +
                slideshow[i].src + ' class="images" height="100%"' +
                ' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
            }
 <h3> Project 2: Slide Show </h3>
<h4> I do not own any of the following pictures </h6>
            <h4> All pictures acquired online, unknown owners </h4>
<br />
<div id="picture">
  <img src="slideshow1.jpg" class="images" alt="my picture" height="200 px">
  <p>The Happy Cat</p>
</div>
<div class="buttons">
  <button class="left" onClick="prevPic()">PREVIOUS</button>
  <button onClick="nextPic()">NEXT</button>
</div>

您声明了var slideShow = [];数组，但稍后将使用以下代码填充slideshow：

slideshow[0] = newImage("slideshow1.jpg","The Happy Cat");

它抛出CCD_ 3，因为您无法设置CCD_。

使用var slideshow = []而不是var slideShow = []

相关文章：