如何让Slider显示下一个或上一个跨度点击

时间:2015-10-19 15:53:56

标签: javascript html css

我使用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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

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

而不是:

 var showimg = startpath + twodigitnum + extension

我会尝试:

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