如何將當前圖像文件名添加到滑塊

我是新來的Javascript，並在w3schools.com上找到此代碼以添加滑塊。如何將當前圖像文件名添加到滑塊

它工作得很好，但我需要添加當前文件名在下一個和上一個按鈕之間，我不知道如何。

這裏是我使用的代碼：

的HTML

<div class="slideshow-container"> 
<div class="mySlides fade"> 
<div class="numbertext">1/3</div> 
<img src="img1.jpg" style="width:100%"> 
<div class="text">Caption Text</div> 
</div> 

<div class="mySlides fade"> 
<div class="numbertext">2/3</div> 
<img src="img2.jpg" style="width:100%"> 
<div class="text">Caption Two</div> 
</div> 

<div class="mySlides fade"> 
<div class="numbertext">3/3</div> 
<img src="img3.jpg" style="width:100%"> 
<div class="text">Caption Three</div> 
</div> 

<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 
</div> 
<br> 

<div style="text-align:center"> 
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div>

的CSS

* {box-sizing:border-box} 

/* Slideshow container */ 
.slideshow-container { 
max-width: 1000px; 
position: relative; 
margin: auto; 
} 

.mySlides { 
display: none; 
} 

/* Next & previous buttons */ 
.prev, .next { 
cursor: pointer; 
position: absolute; 
top: 0%; 
width: 45%; 
margin-top: -22px; 
padding: 16px; 
color: white; 
font-weight: bold; 
font-size: 18px; 
transition: 0.6s ease; 
border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
right: 0; 
border-radius: 3px 0 0 3px; 
} 
.prev { 
text-align: right; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
background-color: rgba(0,0,0,0.8); 
} 

/* Caption text */ 
.text { 
color: #f2f2f2; 
font-size: 15px; 
padding: 8px 12px; 
position: absolute; 
bottom: 8px; 
width: 100%; 
text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
color: #f2f2f2; 
font-size: 12px; 
padding: 8px 12px; 
position: absolute; 
top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
cursor:pointer; 
height: 13px; 
width: 13px; 
margin: 0 2px; 
background-color: #bbb; 
border-radius: 50%; 
display: inline-block; 
transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
-webkit-animation-name: fade; 
-webkit-animation-duration: 1.5s; 
animation-name: fade; 
animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
from {opacity: .4} 
to {opacity: 1} 
} 

@keyframes fade { 
from {opacity: .4} 
to {opacity: 1} 
}

JavaScript的

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
showSlides(slideIndex = n); 
} 

function showSlides(n) { 
var i; 
var slides = document.getElementsByClassName("mySlides"); 
var dots = document.getElementsByClassName("dot"); 
if (n > slides.length) {slideIndex = 1} 
if (n < 1) {slideIndex = slides.length} 
for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
} 
for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" active", ""); 
} 
slides[slideIndex-1].style.display = "block"; 
dots[slideIndex-1].className += " active"; 
}

所以我改變了上一個和下一個箭頭到頂部，因爲這是我需要它們的地方。我要添加3個菜單作爲圖像，我需要它說第1頁的3，第2頁的第3頁和第3頁的第3頁，取決於它們在哪個菜單上。所以我想我將需要將圖像文件名稱更改爲「第1頁，共3頁」，「第2頁，共3頁」和「第3頁，共3頁」，以使其像我需要的那樣工作。那麼如何在我的prev和下一個箭頭之間顯示當前文件名？

我希望這一切都有意義！任何幫助，將不勝感激！！

謝謝！

來源

2017-08-17 Peggy

您可以嘗試在JavaScript中讓你的形象標籤的來源和使用更新的字幕文本

var ctext = slides[slideIndex - 1].childNodes[1].getAttribute("src") 
slides[slideIndex - 1].childNodes[2].innerHTML = ctext

來源

2017-08-19 14:25:25 Mortz

如何將當前圖像文件名添加到滑塊

回答

相關問題