如何拥有一个带有一个选择器的图像滑块？

Question

有一个图像滑块，只有一个 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();">

如何拥有一个带有一个选择器的图像滑块？

how to have an image slider with one selector?

javascript

slider