幻燈片上的圖像計數器（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，您可以設置的slides件innerHTML：

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