html - 幻灯片上的图像计数器 (1/5)

Question

我是 Web 开发的新手，我有一个关于如何创建图像计数器以及如何设置它的样式的问题。

当您单击箭头时，会出现另一个图像。

我现在有一个 01/05 的占位符文本，它是样式化的，但我想知道如何才能真正将其制作成具有相同样式的计数器。任何帮助将非常感激。另外，我正在使用 Bootstrap。

<script>
 var slideIndex = 1;
 showDivs(slideIndex);

function plusDivs(n) {
 showDivs(slideIndex += n);
}

function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 if (n > x.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = x.length} ;
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";  
 }
  x[slideIndex-1].style.display = "block";  
 }
</script>

<div class="container">
    <div class="col-md-6 col-xs-12">
        <img src="images/Flat-iPhone-5C-Mock-Up.png" class="iphone mySlides">
        <img src="images/Flat-iPhone-5C-Mock-Upblue.png" class="iphone mySlides"  style="display:none">
        <img src="images/Flat-iPhone-5C-Mock-Upred.png" class="iphone mySlides"  style="display:none">
        <img src="images/Flat-iPhone-5C-Mock-Upwhite.png" class="iphone mySlides"  style="display:none">
        <img src="images/Flat-iPhone-5C-Mock-Upyellow.png" class="iphone mySlides"  style="display:none">
    </div>
    <div class="col-md-6 col-xs-12 first_heading">
        <h1>Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, </br> 
        sed do eiusmod tempor incididunt ut labore et dolore </br> 
        magna aliqua. Ut <b>enim ad minim</b> veniam, quis </br> 
        nostrud exercitation ullamco laboris nisi </br> 
        ut aliquip ex ea commodo consequat.</p>
        <button>Learn More</button>
        <p class="slides">
            <b>01/05</b>
        </p>
        <p class="arrows">
            <a onclick="plusDivs(-1)"> <span class="glyphicon glyphicon-menu-left fa-2x" aria-hidden="true"></span></a>
            <a onclick="plusDivs(+1)"><span class="glyphicon glyphicon-menu-right fa-2x" aria-hidden="true"></span></a>
        </p>
    </div>
</div>

Answer 1

在 showDivs 中，您可以设置 slides 元素的 innerHTML:

var counter = document.getElementsByClassName("slides")[0];
counter.innerHTML = "<b>" + slideIndex + "/" + x.length + "</b>";