HTML / CSS / JS幻灯片中的“放置点”

时间：2019-02-17 21:39:36

标签： javascript html css slideshow

我正在尝试制作一个幻灯片，其底部带有一些导航或占位符点-幻灯片本身正在运行，但在此处的最小示例中，底部仅显示一个点。我不知道自己在做什么错-经过研究，将其搁置了几天，然后又回到原来的位置，现在是时候提出问题了……

这是我正在使用的代码：

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

任何人都知道前两个点在哪里以及如何修复它，以便三个点连续出现？

2 个答案:

答案 0 :(得分：2)

您的点（又称点）具有绝对位置，因此它们都将重叠。绝对定位完全按照其说的去做，并将事物放置在正确的位置。即使您将它们显示为inline-block，它也会忽略HTML通常会执行的正常“流”（也称为“具有布局”）。

相反，您应该将它们包装在容器元素中并相应地放置。然后，容器内的点将“具有布局”并根据inline-block显示类型并排流动。

这是一个基本的工作示例

.slideshow {
  position: relative;
  width: 100%;
  height: 80vh;

background: rebeccapurple;
}

.navigation {
  position: absolute;
  bottom: 20px;
  width: 100%;

  text-align: center; /* buttons align like text */
}

.pip {
  display: inline-block;
  width: 10px;
  height: 10px;
  padding: 0;
  
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
}

.pip--active {
  background: rgba(255, 255, 255, 1);
}
<div class="slideshow">
  <div class="navigation">
    <button type="button" class="pip pip--active"></button>
    <button type="button" class="pip"></button>
    <button type="button" class="pip"></button>
  </div>
</div>

请注意，我已使用按钮而不是点的链接。这是因为在点击时，点子实际上并没有链接到任何地方。他们只是更新幻灯片的状态。

答案 1 :(得分：1)

您没有两个缺失的点；您所有的点都彼此重叠！

您给了每个点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>

相关问题
最新问题