Question

我为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>

Answer 1

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

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

会抛出ReferenceError，因为您无法设置undefined的属性。

Answer 2

1）幻灯片中的错字显示

2）没有关系，但你不能有重复的id，而是使用class

            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>

Answer 3

使用var slideshow = []代替var slideShow = []

HTML / JavaScript：为什么我的按钮不起作用？

3 个答案: