HTML/CSS/JavaScript：无法单击幻灯片指示器按钮

我是网页设计的新手，正在尝试在幻灯片上添加指示点，因此单击它们时，我可以转到下一张图像。查看此图像图像2

我最初遵循W3School页面上的说明：https://www.w3schools.com/howto/howto_js_slideshow.asp将指示器点放在标签下方和幻灯片横幅下方。但是，我想把点放在幻灯片横幅上，所以我将标签更改为，但随后 JavaScript 停止工作。

简而言之，我正在寻找的就像此页面上的"另一个示例"幻灯片横幅：https://www.w3schools.com/w3css/w3css_slideshow.asp可悲的是，该页面上使用的代码不完整，我无法直接将其复制并粘贴到我的网站上。

请帮助查看我的代码出了什么问题，或者为了节省您的时间，只需让我知道如何实现上一段中提到的功能。非常感谢。

<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
    <img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204835/sunset1.jpg" style="width:100%">
 <div id="overlay"></div>
 <div class="text">abcde</div>
  <div class="indicator">
  <button class="dot" onclick="currentSlide(1)"></button> 
  <button class="dot" onclick="currentSlide(2)"></button> </div>
  </div>
 <div class="mySlides">
<img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204834/sunset2.jpg" style="width:100%">
<div id="overlay"></div>
<div class="text text1">abcde</div>
     <div class="indicator">
     <button class="dot" onclick="currentSlide(1)"></button> 
     <button class="dot1" onclick="currentSlide()"></button> </div>
</div>
 <!-- Next and previous buttons -->
 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
 </html>
  <style>
 .slideshow-container {
 max-width: 100%;
position: relative;
padding-top:30px;
margin: auto;
height:auto;
   }
    .img{
 height:350px;

}

    .mySlides {
   display: none;
     }
   .prev, .next {
   cursor: pointer;
   position: absolute;
  top: 50%;
 width: auto;
 margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
 z-index: 2;
  }
  .next {
 right: 0;
 border-radius: 3px 0 0 3px;
  }
 .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
      }

  .text {
 color: #f2f2f2;
font-size: 20px;
padding: 8px 12px;
 position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:45%;
 font-family:'cwTeXYen';
  z-index: 2;
     }
.text1 {
color: #f2f2f2;
font-size: 40px;
  top:35%;
    }
.text2 {
font-family:'Noto Sans TC';
color: black;
font-weight:300;
}
.indicator {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:85%;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-radius: 50%;
transition: background-color 0.6s ease;
 border: 1px solid #ffffff;
}
.active, .dot:hover {
background-color: #ffffff;
}
.dot1{
height: 15px;
width: 15px;
background color:white;
border-radius: 50%;
 border: 1px solid #ffffff;
 margin-left: 2px;
}
#overlay {
position: absolute; 
height:50%;
top: 30%; 
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1;
}
</style>
<script>
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";
}
</script>

这个

怎么样：

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
    .mySlides {
        display: none
    }
    .w3-left, .w3-right, .w3-badge {
        cursor: pointer
    }
    .w3-badge {
        height: 13px;
        width: 13px;
        padding: 0
    }
    .w3-display-container {
        position: relative;
    }
    .myCaptions {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0.5rem 2rem;
        background-color: rgba(255, 255, 255, 0.5);
    }
</style>
<body>
<div class="w3-content w3-display-container" style="max-width:800px; text-align: center">
    <p class="myCaptions" style="display: none;">Mountains</p>
    <p class="myCaptions" style="display: none;">Nature Wide</p>
    <p class="myCaptions" style="display: none;">Snow Wide</p>
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" alt="image1">
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" alt="image2">
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_snow_wide.jpg" style="width:100%" alt="image3">
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
        <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
        <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
</div>
<script>
    let slideIndex = 1
    showDivs(slideIndex)
    function plusDivs (n) {
        showDivs(slideIndex += n)
    }
    function currentDiv (n) {
        showDivs(slideIndex = n)
    }
    function showDivs (n) {
        let i
        const x = document.getElementsByClassName('mySlides')
        const dots = document.getElementsByClassName('demo')
        if (n > x.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = x.length
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = 'none'
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(' w3-white', '')
        }
        x[slideIndex - 1].style.display = 'block'
        dots[slideIndex - 1].className += ' w3-white'
        // adjust captions
        const captions = document.getElementsByClassName('myCaptions')
        for (i = 0; i < captions.length; i++) {
            captions[i].style.display = 'none'
        }
        captions[slideIndex-1].style.display = 'block'
    }
</script>
</body>
</html>

相关内容

最新更新

热门标签：