javascript - 如何拥有一个带有一个选择器的图像 slider ？

Question

有一个图像 slider ，上面只有一个 img tag和四个<img>标签作为选择器。我想将选择器合并为一个前向选择器，但是 js当我替换 i 时，代码不起作用与 i+1 。

如有任何帮助，我们将不胜感激。

function middle_pic(i) {
  document.getElementById('placeholder').src = 'images/products_center_middle_img' + i + '.png';
}

<div id="middle-img-pic">
  <img src="images/products_center_middle_img1.png" id="placeholder">
</div>
<img src="images/selector.png" onClick="middle_pic('1');">
<img src="images/selector.png" onClick="middle_pic('2');">
<img src="images/selector.png" onClick="middle_pic('3');">
<img src="images/selector.png" onClick="middle_pic('4');">

Answer 1

您传递给函数的变量 i 不是 int，因此 i+1 不会增加 i 的值.

您可以使用parseInt(i)从字符串中解析整数。这应该有效

var i=0
function middle_pic() {
  i=i+1;
  document.getElementById('placeholder').src = 'http://dummyimage.com/600x400/000/fff&text=Image' + (parseInt(i)+1);
}

<div id="middle-img-pic">
  <img src="http://dummyimage.com/600x400/000/fff&text=Image1" id="placeholder">
</div>
<img src="images/selector.png" onClick="middle_pic();">