幻灯片中的图像计数器（1/5）

Question

我是网络开发的新手我有一个关于如何创建图像计数器以及如何设置图案的问题。

单击箭头时，将显示另一个图像。

我现在有一个占位符文本，现在是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内，您可以设置innerHTML元素的slides：

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