Question

我有以下滑块：

    <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张图像，我想在滑块的右下方添加一个计数器。像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。

通过JavaScript添加图像滑块计数器

1 个答案: