如何使用一個選擇器設置圖像滑塊？

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();">