Question

我正在创建一个非常基本的程序，它允许用户使用一组按钮在图像之间循环，而我遇到的主要问题是，它似乎只是选择数组中的随机点。例如，数组从1开始，却显示位置0的图像，或者说我试图向后循环浏览图像，如果我从0开始（本应是位置3），它就会跳回到位置1处的图片。我听不懂。

var i = 0;

var imageArr = [];

imageArr[0] = 'img/img_BMW.jpg';
imageArr[1] = 'img/img_Chr.jpg';
imageArr[2] = 'img/img_Mas.jpg';
imageArr[3] = 'img/img_Merc.jpg';

function imageCycle(){
  document.imgCycle.src = imageArr[i];

  if(i < imageArr.length - 1){
    i++
  }
  else{
    i = 0;
  }

  console.log(i);
}

function imagePrev(){
  document.imgCycle.src = imageArr[i];

  if(i == imageArr.length - 1){
    i = 3;
  }
  else{
    i--;
  }
}

<img name="imgCycle" width="440" height="250"/>
<ul>
    <li><button type="button" id="back-Btn" onclick="imagePrev();">Back</button></li>
    <li><button type="button" id="forward-Btn" onclick="imageCycle();">Forward</button></li>
</ul>

Answer 1

您可以添加一个方法以转到所需的下一个索引，并具有此功能可确保索引不会超出范围。

请注意，像通过onclick属性进行绑定一样，绑定事件处理程序实际上不再是首选的方式。尝试改用addEventListener。

var i = 0;

// Use some actuale images so we can see what happens in the DOM.
var imageArr = [
  '//placehold.it/300/200/?text=1',
  '//placehold.it/300/200/?text=2',
  '//placehold.it/300/200/?text=3',
  '//placehold.it/300/200/?text=4'
];

/**
 * A method to alter the index. Pass 1 to go to the next slide and -1 to go to 
 * the previous slide. It will make sure the index is never out of bounds.
 */
function getNextIndex(index, modifier) {
  // Add the modifier to the index.
  index = index + modifier;
  // Check if the index is less than zero, this is unvalid and we will reset the index
  // to the last item in the image array. When the index is more than 0, check if it exceeds
  // the index for the last item in the array. In this case reset it to 0 so we go back to 
  // the first image.
  if (index < 0) {
    index = imageArr.length - 1;
  } else if (index >= imageArr.length) {
    index = 0;
  }
  
  return index;
}

function updateImage(index) {
  document.imgCycle.src = imageArr[index];
}

function goToNextImage() {
  i = getNextIndex(i, 1);
  updateImage(i);
}

function goToPreviousImage() {
  i = getNextIndex(i, -1);
  updateImage(i);
}

updateImage(0);

<img name="imgCycle" width="440" height="250"/>
<ul>
    <li><button type="button" id="back-Btn" onclick="goToPreviousImage();">Back</button></li>
    <li><button type="button" id="forward-Btn" onclick="goToNextImage();">Forward</button></li>
</ul>

Answer 2

您要在值递增之前设置src。

尝试

var i = 0;

var imageArr = [];

imageArr[0] = 'img/img_BMW.jpg';
imageArr[1] = 'img/img_Chr.jpg';
imageArr[2] = 'img/img_Mas.jpg';
imageArr[3] = 'img/img_Merc.jpg';

function imageCycle(){

  

  if(i < imageArr.length - 1){
    i++
  }
  else{
    i = 0;
  }
document.imgCycle.src = imageArr[i];
  console.log(i);
}

function imagePrev(){
  

  if(i == imageArr.length - 1){
    i = 3;
  }
  else{
    i--;
  }
  document.imgCycle.src = imageArr[i];
  console.log(i);
}

<img name="imgCycle" width="440" height="250"/>
<ul>
    <li><button type="button" id="back-Btn" onclick="imagePrev();">Back</button></li>
    <li><button type="button" id="forward-Btn" onclick="imageCycle();">Forward</button></li>
</ul>

Answer 3

所以我上方的人（@Syed）已经回答了主要问题，但我想指出另一个问题：

您的 imagePrev（）函数：它检查 i 是否等于数组长度减去1，如果匹配，则使 i 成为 3 。就您而言，它将使图片停留在最后一张图片上，否则返回（直到 i 达到-1并导致问题）

尝试以下方法：

function imagePrev() {

  if (i == 0) {
    i = imageArr.length - 1;
  }
  else {
    i--;
  }
  document.imgCycle.src = imageArr[i];
  console.log(i);
}

欢呼

为什么这个数组只选择随机数？

3 个答案: