如何將點移到中心-有解無憂

我一直面臨這個問題。每當我將影像放入幻燈片時，下面的點就會移動到隨機位置。

如果可能，我還使用此代碼使按鈕可點擊。

    /* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

這是我的完整代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    h1 {
      margin: 0px;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }
    
    .navbar a:hover,
    .dropdown:hover .dropbtn {
      background-color: MediumSeaGreen;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .auto-style2 {
      text-align: center;
      font-family: Verdana;
    }
  </style>
  <meta content="en-us" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

  <h1 style="background-color:MediumSeaGreen;" class="auto-style2">
    <a class="auto-style4" href="The Logic Store.html">The Logic Store</a></h1>

  <margin: 0px;>

</body>

<margin: 0px;>

</html>

<!DOCTYPE html>

<div class="navbar" style="height: 45px">
  <a href="The Logic Store.html">Home</a>
  <div class="dropdown" style="height: 45px">
    <button class="dropbtn">Phones
    </button>
    <div class="dropdown-content">
      <a href="Apple phone.html">Apple</a>
      <a href="Samsung.html">Samsung</a> <a href="Google.html">Google</a>
    </div>
  </div>

  <div class="dropdown" style="height: 45px">
    <button class="dropbtn">Laptops
    </button>
    <div class="dropdown-content">
      <a href="Apple mac.html">Apple</a> <a href="Hp.html">HP</a>
      <a href="Dell.html">Dell</a>
    </div>
  </div>

  <a href="About.html">About</a>

</div>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .topnav a.active {
      background-color: #04AA6D;
      color: white;
    }
    
    h1 {
      margin: 0px;
    }
    
    <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {
      box-sizing: border-box;
    }
    
    body {
      font-family: Verdana, sans-serif;
    }
    
    .mySlides {
      display: none;
    }
    
    img {
      vertical-align: middle;
    }
    /* Slideshow container */
    
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    /* Next & previous buttons */
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }
    /* Position the "next button" to the right */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    /* 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);
    }
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #333;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    /* The dots/bullets/indicators */
    
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active {
      background-color: #717171;
    }
    /* Fading animation */
    
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    /* On smaller screens, decrease text size */
    
    @media only screen and (max-width: 300px) {
      .text {
        font-size: 11px
      }
    }
    
    .auto-style3 {
      max-width: 1000px;
      position: relative;
      margin: auto auto auto 0px;
    }
    
    a {
      color: #333333;
    }
    
    .auto-style4 {
      text-decoration: none;
      color: #000000;
    }
  </style>
</head>

<body>

  <div class="auto-style3" style="left: 0px; top: 0px; height: 383px; width: 1410px;">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="TLS.png" style="width:100%&gt; &lt;div&gt;&lt;/div&gt; hljs-attr">auto-style2>
    </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>

    <script>
      let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i  ) {
          slides[i].style.display = "none";
        }
        slideIndex  ;
        if (slideIndex > slides.length) {
          slideIndex = 1
        }
        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";
        setTimeout(showSlides, 2000); // Change image every 10 seconds
      }
    </script>

</body>

</html>

此外，我如何知道可用于幻燈片放映的影像大小？

這里有一些 htmlimages 來展示我試圖解釋的內容。

順便說一句，我是編碼新手，正在嘗試找出一些東西，所以任何幫助都是有用的。先感謝您

uj5u.com熱心網友回復：

添加以下 CSS：

#slider-container {
  width: 100%;
  max-width: 1410px;
  margin: auto;
}

通過添加這個，#slider-container寬度將始終為100%，但永遠不會超過1410px。如果要居中，請添加margin: auto;.

順便說一句，您上面提供的代碼真是一團糟。我試著稍微清理一下，但我建議你寫一個干凈的代碼。

請參閱下面的片段。

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: MediumSeaGreen;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.auto-style2 {
  text-align: center;
  font-family: Verdana;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

h1 {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif;
}

.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

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


/* Position the "next button" to the right */

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


/* 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);
}


/* Number text (1/3 etc) */

.numbertext {
  color: #333;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}


/* Fading animation */

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .text {
    font-size: 11px
  }
}

.auto-style3 {
  max-width: 1000px;
  position: relative;
  margin: auto auto auto 0px;
}

a {
  color: #333333;
}

.auto-style4 {
  text-decoration: none;
  color: #000000;
}

#slider-container {
  width: 100%;
  max-width: 1410px;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h1 style="background-color:MediumSeaGreen;" class="auto-style2">
    <a class="auto-style4" href="The Logic Store.html">The Logic Store</a>
  </h1>

  <div class="navbar" style="height: 45px">
    <a href="The Logic Store.html">Home</a>
    <div class="dropdown" style="height: 45px">
      <button class="dropbtn">Phones
        </button>
      <div class="dropdown-content">
        <a href="Apple phone.html">Apple</a>
        <a href="Samsung.html">Samsung</a> <a href="Google.html">Google</a>
      </div>
    </div>

    <div class="dropdown" style="height: 45px">
      <button class="dropbtn">Laptops
        </button>
      <div class="dropdown-content">
        <a href="Apple mac.html">Apple</a> <a href="Hp.html">HP</a>
        <a href="Dell.html">Dell</a>
      </div>
    </div>

    <a href="About.html">About</a>

  </div>

  <div id="slider-container" class="auto-style3" style="left: 0px; top: 0px; height: 383px;">

    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="TLS.png" style="width:100%&gt; &lt;div&gt;&lt;/div&gt; hljs-attr">auto-style2>
    </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>

  <script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i  ) {
        slides[i].style.display = "none";
      }
      slideIndex  ;
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      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";
      setTimeout(showSlides, 2000); // Change image every 10 seconds
    }
  </script>

</body>

</html>

uj5u.com熱心網友回復：

請添加min-width: 100vw;到容器中

這使容器全寬，所以點來干預視口

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/517106.html

標籤：htmlcss

上一篇：有沒有辦法將標簽附加到javascript的元素上？

下一篇：如何使用媒體查詢制作固定或粘性導航欄？