我有個問題。我是構建網頁的新手。我正在嘗試在我的網頁上構建兩個完全相同的幻燈片容器。容器顯示不錯。問題是我的幻燈片容器下的按鈕都適用于上面的那個。下部幻燈片容器不作業。它停留在第一張圖片上。誰能告訴我我的代碼有什么問題？
非常感謝各位！！
<div>
<div class="neergard-container">
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img
src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img
src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img
src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img
src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img
src="/Bilder Weinberg/Kücheblickraus111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img
src="/Bilder Weinberg/KücheSitzecke111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img
src="/Bilder Weinberg/Esstischwintergarten111.jpg"
style="width: 100%"
/>
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img
src="/Bilder Weinberg/StühleWintergarten111.jpg"
style="width: 100%"
/>
</div>
<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex = n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let 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";
}
</script>
</div>
<h3 class="KutscherFW">Kutscherwohnung</h3>
<p id="kutscher">
Kutscherwohnung Einer weitere traumhafte Ferienwohung in Strande bei Kiel.
Kaum enfernt vom Wasser die frische Luft genie?en.
</p>
<div>
<div class="kutscher-container">
<div class="kutscherFolie fade">
<img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/Kücheblickraus111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/KücheSitzecke111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/Esstischwintergarten111.jpg"
style="width: 100%"
/>
</div>
<div class="kutscherFolie fade">
<img
src="/Bilder Weinberg/StühleWintergarten111.jpg"
style="width: 100%"
/>
</div>
<a class="prev" onclick="plusFolien(-1)">?</a>
<a class="next" onclick="plusFolien(1)">?</a>
</div>
<br />
<div style="text-align: center">
<span class="button" onclick="currentSlide(1)"></span>
<span class="button" onclick="currentSlide(2)"></span>
<span class="button" onclick="currentSlide(3)"></span>
<span class="button" onclick="currentSlide(4)"></span>
<span class="button" onclick="currentSlide(5)"></span>
<span class="button" onclick="currentSlide(6)"></span>
<span class="button" onclick="currentSlide(7)"></span>
<span class="button" onclick="currentSlide(8)"></span>
<span class="button" onclick="currentSlide(9)"></span>
</div>
<script>
let folieNumber = 1;
showFolie(folieNumber);
function plusFolie(n) {
showFolie((folieNumber = n));
}
function currentFolie(n) {
showFolie((folieNumber = n));
}
function showFolie(n) {
let i;
let folie = document.getElementsByClassName("kutscherFolie");
let buttons = document.getElementsByClassName("button");
if (n > folie.length) {
folieNumber = 1;
}
if (n < 1) {
folieNumber = folie.length;
}
for (i = 0; i < folie.length; i ) {
folie[i].style.display = "none";
}
for (i = 0; i < buttons.length; i ) {
buttons[i].className = buttons[i].className.replace(" active", "");
}
folie[folieNumber - 1].style.display = "block";
buttons[slideNumber - 1].className = " active";
}
</script>
</div>
uj5u.com熱心網友回復：
首先，下面和上面的幻燈片都呼叫了相同的函式。
“當前幻燈片”
我認為下面的幻燈片應該呼叫另一個函式。"currentFolie" 還有一個錯字。沒有“plusFolien”功能。也許這是一個“showFolie”功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/466696.html
標籤：javascript html css 按钮 幻灯片
上一篇：在.map中添加父div