javascript - 通过 JavaScript 添加图像 slider 计数器

Question

我有以下 slider :

    <div class="row">
        <div class="col-md-12">
            <div id="container">
                <img id='slider-img' src='images/img1.png'>
                <div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
                <div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
            </div>
        </div>
    </div>

以及控制图像转换的 JavaScript:

var imagecount = 1;
var totalimage = 11;
function slider(element) {
  var image = document.getElementById("slider-img");
  imagecount = imagecount < totalimage ? imagecount + Number(element) : 1;
  if (imagecount < 1) {
    imagecount = 1;
  };
  image.src = "images/img" + imagecount + ".png";
}

window.onload = function() {
  slider(0);

}

我目前在图像文件夹中有 11 张图像，我想在 slider 的右下角添加一个计数器。像 1/11 等...我当然需要它环绕，所以在 11/11 之后，单击右箭头将显示 1/11 的标题。

Answer 1

您可以简单地添加一个div 来显示信息。您已经知道计数和总数。

<div id="showCount"></div>

在 JS 中:

var showCount=$('#showCount');
function slider(element) {
  var image = document.getElementById("slider-img");
  imagecount = imagecount < totalimage ? imagecount + Number(element) : 1;
  if (imagecount < 1) {
    imagecount = 1;
  }
  image.src = "images/img" + imagecount + ".png";
  showCount.text( imagecount + '/' + totalimage );
}

顺便说一句，您不需要在 if 的末尾使用分号。

更新:使用 CSS 将 div 放置在您需要的位置。我不建议为此使用 JS。