1

对于我在网络开发的第一年大学项目，我创建了一个旨在让人们加入烹饪学校的网站。

我得到了我想要的成绩，但我忘记了这个问题，直到我再次看到这个问题。

我有两个容器。第一个容器是幻灯片，显示循环动画中的 3 个图像。

第二个容器是下面的一个栏，显示了三个图像中的哪一个图像正在显示。

现在我遇到的问题是我无法将栏放置在图像容器中。事实上，正因为如此，我有一个奇怪的空白。

我尝试过的解决方案：我曾经padding手动移动它（它有效，但是当我调整屏幕大小或调整屏幕时，栏会被放置在奇怪的位置，这不是一个有效的方法）我尝试使用margin: 0;

我不知道该怎么做，所以欢迎任何帮助。

我不知道如何在此处包含图像，但这是一个示例：https ://cooking-school-project.hostman.site/index.html

这是代码笔：https ://codepen.io/gulam101/pen/qBaxwMq （我无法包含我项目中的确切图像，所以我包含了猫的图像）

这是代码：

HTML


        <div class="mySlides fade">
          <img src="/pictures/img10.jpg" style="width:100%">
        </div>
        
        <div class="mySlides fade">
          <img src="/pictures/img02.jpg" style="width:100%">
        </div>
        
        <div class="mySlides fade">
          <img src="/pictures/img03.jpg" style="width:100%">
        </div>
        
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
        

        <div class="dot-container">
          <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>
      </div>

用于图像/幻灯片的 CSS

/* DO NOT ALTER (CODE UNDERNEATH) */
.mySlides {
  display: none;
}

img {
  vertical-align: middle;
  height: 50%;
  background-size: cover;
  object-fit: cover;
  object-position: 50% 50%;
}
/* DO NOT ALTER (CODE ABOVE) */

CSS（幻灯片的核心部分）

/* Slideshow Animation */

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  background-size: cover;
  background: no-repeat center center fixed;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* Disables Slideshow Animation for smaller/less powerful devices */
@media only screen and (max-width: 767px) {
  .mySlides,
  .slideshow-container,
  .prev,
  .next,
  .dot-container,
  .fade,
  .dot {
    display: none;
  } 
} 
  
  /* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #4CAF50;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: #333;
  opacity: 0.8;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  }
  
  /* 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,
.prev:focus,
.next:focus,
.prev:active,
.next:active {
  -webkit-animation-name: pulse-grow-on-hover;
  animation-name: pulse-grow-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

  /* Pulse Grow Animation */

@-webkit-keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pulse-grow-on-hover {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* End of Animation */

CSS 点容器

.dot-container {
    padding-top: 15px;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #333;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    position: relative;
    padding-top: 1px;
  }
  
  .active,
  .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .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}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
4

0 回答 0