我使用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;
}
&#13;
.slider {
text-align: center;
}
#bigpic {
height: 500px;
}
.thumbs img {
height: 100px;
padding: 20px 0 20px 0;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
在路径构造中的某处缺少斜杠/
和前缀。
而不是:
var showimg = startpath + twodigitnum + extension
我会尝试:
var showimg = startpath + '/slider' + twodigitnum + extension