如何让Slider在跨度单击时显示下一个或上一个

Question

我使用了bootstrap 3的组合，只是从头开始编写。

当我单击图像缩略图时，它们会执行应做的操作，但是当我单击跨度箭头时，它不会转到下一张或上一张图像。

这是代码：

 var maximages = 6; var startpath = "imgs" var extension = ".jpg" function calcslide(x) { var currentimage = document.getElementById("bigpic").src; var dotat = currentimage.indexOf(extension); var stringnumber = currentimage.substr(dotat - 2, 2); var nextnum = parseInt(stringnumber) + x; if (nextnum < 1) { nextnum = maximages; } if (nextnum > maximages) { nextnum = 1; } var twodigitnum = ("0" + nextnum).slice(-2); var showimg = startpath + twodigitnum + extension; showbig(showimg); } function showbig(pic) { document.getElementById("bigpic").src = pic; } 

 .slider { text-align: center; } #bigpic { height: 500px; } .thumbs img { height: 100px; padding: 20px 0 20px 0; } 

  <div class="slider"> <span class="glyphicon glyphicon-chevron-left btn btn-lg" alt="previous" onclick="calcslide(-1)"></span> <img src="imgs/slider01.jpg" id="bigpic" /> <span class="glyphicon glyphicon-chevron-right btn btn-lg" alt="next" onclick="calcslide(1)"></span> <div class="thumbs"> <span class="glyphicon glyphicon-chevron-left" alt="previous" onclick="calcslide(-1)"></span> <img src="imgs/slider01.jpg" onclick="showbig(this.src)" /> <img src="imgs/slider02.jpg" onclick="showbig(this.src)" /> <img src="imgs/slider03.jpg" onclick="showbig(this.src)" /> <img src="imgs/slider04.jpg" onclick="showbig(this.src)" /> <img src="imgs/slider05.jpg" onclick="showbig(this.src)" /> <img src="imgs/slider06.jpg" onclick="showbig(this.src)" /> <span class="glyphicon glyphicon-chevron-right" alt="next" onclick="calcslide(1)"></span> </div> </div> 

Answer 1

在路径构造中的某处缺少斜杠/和前缀。

代替：

 var showimg = startpath + twodigitnum + extension

我会尝试：

 var showimg = startpath + '/slider' + twodigitnum + extension