如何将当前图像文件名添加到滑块

我是新来的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

如何将当前图像文件名添加到滑块

回答

相关问题