个人中心
gpt4 book ai didi

javascript - HTML/CSS/JS 幻灯片中的 "Place dots"

转载 作者：行者123 更新时间：2023-11-30 11:08:27 30 4
gpt4 key购买 nike

我正在尝试使用底部的那些小导航或占位符点制作幻灯片 - 幻灯片本身可以正常工作，但在此处的最小示例中，底部仅显示一个点。我无法弄清楚我做错了什么 - 进行了研究，搁置了几天然后又回来了，现在是提问的时候了......

这是我正在使用的代码:

    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                html {
                    background-color: lightblue;
                }
                body {
                    width:1024px;
                    height:768px;
                    margin-left: auto;
                    margin-right: auto;
                    border-style: solid;
                    background: lightgreen;
                    position: relative;
                }
                div#banner{
                    position: absolute;
                    top:50px;
                    width: 100%;
                    height: 120px;
                    background: pink;
                    text-align: center;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    font-size:1.5em;
                }
                div#minibanner{
                    position: absolute;
                    top:0px;
                    height:50px;
                    width: 100%;
                    background: orange;
                    text-align: center;
                }
                div#slideContainer {
                    position:absolute;
                    left:200px;
                    top:170px;
                    height:558px;
                    width:794px;
                    padding-top: 30px;
                    padding-left:30px;
                    font-size: 2em;
                    background: yellow;
                }
                div#sidenav{
                    position: absolute;
                    top:170px;
                    left:0px;
                    width: 200px;
                    height:558px;
                }
                .contentSlide{
                    display: none;
                }
                div#bottomnav{
                    position: absolute;
                    bottom:0px;
                    height:40px;
                    width: 100%;
                    background: pink;
                    text-align: center;
                }
                .dot {
                  position:absolute;
                  bottom:60px;
                  cursor: pointer;
                  height: 15px;
                  width: 15px;
                  margin: 22px 22px; 
                  background-color: #bbb;
                  border-radius: 50%;
                  display: inline-block; 
                  transition: background-color 0.6s ease;
                }
                .active, .dot:hover {
                  background-color: #717171;
                }
                .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}
                }
                .prev, .next {
                  cursor: pointer;
                  position: absolute;
                  top: 50%;
                  width: auto;
                  padding: 16px;
                  margin-top: -22px;
                  color: red;
                  font-weight: bold;
                  font-size: 18px;
                  transition: 0.6s ease;
                  border-radius: 0 3px 3px 0;
                  user-select: none;
                }
                .next {
                  right: 0;
                  border-radius: 3px 0 0 3px;
                }
                .prev {
                    left:0;
                }
                .prev:hover, .next:hover {
                  background-color: rgba(0,0,0,0.8);
                }
            </style>
        </head>
        <body>
            <div id="minibanner"><h3>Title of Presentation: testing, testing testing</h3></div>
            <div id="banner"><h1>Introduction</h1></div>
            <div id="sidenav">
                <ul>
                    <li><a href="../../index.html">home</a></li>
                    <li><a href="">Introduction</a></li>
                    <li><a href="">Section 1</a></li>
                    <li><a href="">Section 2</a></li>
                    <li><a href="">Section 3</a></li>
                    <li><a href="">Conclusion</a></li>
                </ul>
            </div>
            <div id="slideContainer">
                <div class="contentSlide fade">
                    <p>Here's an outline:
                        <ul>
                            <li>Introduction</li>
                            <li>Section 1</li>
                            <li>Section 2</li>
                            <li>Section 3</li>
                            <li>Conclusion</li>
                        </ul>
                    </p>
                </div>
                <div class="contentSlide fade">
                    <p>Here are some themes:
                        <ul>
                            <li>Theme 1</li>
                            <li>Theme 2</li>
                            <li>Theme 3</li>
                        </ul>
                    </p>
                </div>            
                <div class="contentSlide fade">
                    <p>...and the conclusions:
                        <ul>
                            <li>Conclusion A</li>
                            <li>Conclusion B</li>
                            <li>Conclusion C</li>
                            <li>Conclusion D</li>
                            <li>Conclusion E</li>
                        </ul>
                    </p>
                </div>
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>
            <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>
            <div id="bottomnav"><p>footer</p></div>
            <script>
                var slideIndex = 1;
                showSlides(slideIndex);                
                // Next/previous controls
                function plusSlides(n) {
                    showSlides(slideIndex += n);
                }
                // Thumbnail image controls
                function currentSlide(n) {
                    showSlides(slideIndex = n);
                }
                function showSlides(n) {
                    var i;
                    var slides = document.getElementsByClassName("contentSlide");
                    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>
        </body>
    </html>

任何人都知道前两个点在哪里以及我如何修复它以便三个点排成一行？

最佳答案

你没有遗漏两个点；你所有的点都坐在一起!

你给了每个点 position: absolute，但它们没有单独的 left 或 right 值，所以它们最终只是坐下在彼此之上。

解决这个问题的方法很简单:让它们的父级 position: absolute 并让这些点只是 position: static。

执行此操作后，您会注意到的另一个问题是这些点看起来偏左，因为它们是相对于整个页面定位的，而您可能希望它们在黄色区域居中。

在 #slideContainer 中移动点的包装器将解决这个问题，因为 #slideContainer 也是 position: absolute，并且绝对定位适用于与元素最近的定位祖先的关系(即，树中位于其上方的任何元素 position: relative、position: absolute 或 position: sticky)。

var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("contentSlide");
  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";
}
html {
  background-color: lightblue;
}

body {
  width: 1024px;
  height: 768px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  background: lightgreen;
  position: relative;
}

div#banner {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 120px;
  background: pink;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1.5em;
}

div#minibanner {
  position: absolute;
  top: 0px;
  height: 50px;
  width: 100%;
  background: orange;
  text-align: center;
}

div#slideContainer {
  position: absolute;
  left: 200px;
  top: 170px;
  height: 558px;
  width: 794px;
  padding-top: 30px;
  padding-left: 30px;
  font-size: 2em;
  background: yellow;
}

div#sidenav {
  position: absolute;
  top: 170px;
  left: 0px;
  width: 200px;
  height: 558px;
}

.contentSlide {
  display: none;
}

div#bottomnav {
  position: absolute;
  bottom: 0px;
  height: 40px;
  width: 100%;
  background: pink;
  text-align: center;
}
.dots-wrapper {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 22px 22px;
  background-color: #bbb;
  border-radius: 50%;
  display: block;
  transition: background-color 0.6s ease;
}

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

.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
  }
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: red;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
<div id="minibanner">
  <h3>Title of Presentation: testing, testing testing</h3>
</div>
<div id="banner">
  <h1>Introduction</h1>
</div>
<div id="sidenav">
  <ul>
    <li><a href="../../index.html">home</a></li>
    <li><a href="">Introduction</a></li>
    <li><a href="">Section 1</a></li>
    <li><a href="">Section 2</a></li>
    <li><a href="">Section 3</a></li>
    <li><a href="">Conclusion</a></li>
  </ul>
</div>
<div id="slideContainer">
  <div class="contentSlide fade">
    <p>Here's an outline:
      <ul>
        <li>Introduction</li>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>Section 3</li>
        <li>Conclusion</li>
      </ul>
    </p>
  </div>
  <div class="contentSlide fade">
    <p>Here are some themes:
      <ul>
        <li>Theme 1</li>
        <li>Theme 2</li>
        <li>Theme 3</li>
      </ul>
    </p>
  </div>
  <div class="contentSlide fade">
    <p>...and the conclusions:
      <ul>
        <li>Conclusion A</li>
        <li>Conclusion B</li>
        <li>Conclusion C</li>
        <li>Conclusion D</li>
        <li>Conclusion E</li>
      </ul>
    </p>
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div class="dots-wrapper" 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>
</div>
<div id="bottomnav">
  <p>footer</p>
</div>

关于javascript - HTML/CSS/JS 幻灯片中的 "Place dots"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54737948/

30 4 0
文章推荐： javascript - 在向前看之前只捕获最接近的匹配项
文章推荐： java - 在 Java/Gradle 环境中访问资源
文章推荐： swift - 如何创建一个函数来返回两个不同数组中的值的匹配项？
文章推荐： java - 使用 Apache POI 创建新工作表会删除所有现有工作表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com