css 为什么页面加载时我的旋转木马旋转，然后完全停止？[duplicate]

cngwdvgl 于 2023-02-14 发布在其他

关注(0)|答案(1)|浏览(142)

- 此问题在此处已有答案**：

Script Tag - async & defer（12个答案）
昨天关门了。
我正在创建一个全栈应用程序，并且正在为我的hero页面添加一个在后台旋转图像的carousel。
到目前为止，我已经创建了HTML、CSS和JavaScript文件。
当页面加载时，它会旋转，但随后carousel停止工作，只停留在第一行。
我不太确定我的代码中是否有错误，但如果有人帮我解决，我会很感激。

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

function changeSlide() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }

  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.opacity = 1;
}

setInterval(changeSlide, 3000);

*{
    margin: 0%;
    padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
  }
  
  .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .slide:first-child {
    opacity: 1;
  }
  
  .slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
  }
  .slide-1 {
    background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
  }
  
  .slide-2 {
    background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
  }
  
  .slide-3 {
    background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="practice.js"></script>
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="practice.css">
    <title>Welcome to Washington State - Home Page</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> 
    <!------------Hero Page-------------->
    <header>
        <div class="carousel">
            <div class="slide slide-1">
              <div class="slide-content">Slide 1</div>
            </div>
            <div class="slide slide-2">
              <div class="slide-content">Slide 2</div>
            </div>
            <div class="slide slide-3">
              <div class="slide-content">Slide 3</div>
            </div>
        </div>
    </header>
</body>

css

来源：https://stackoverflow.com/questions/75415131/why-does-my-carousel-rotate-when-the-page-loads-but-then-stops-completely

1条答案

按热度按时间

u3r8eeie1#

问题是您在创建页面之前加载脚本，并且脚本在加载后立即运行。
您可以将defer添加到脚本中，如下所示：
<script src="practice.js" defer></script>
或者您可以将脚本移到HTML的末尾。
Script Tag - async & defer将是一个很好的信息源来阅读此问题。
为了更容易地看到您的问题，我删除了您的图像，并在CSS中简单地设置了background-color、height和width以查看幻灯片，并且我将setInterval中的延迟减少到了1500。

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

function changeSlide() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }

  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.opacity = 1;
}

setInterval(changeSlide, 1500);

* {
  margin: 0%;
  padding: 0%;
}

/*------------------------------Hero Page---------------------------------*/

.carousel {
  width: 100%;
  height: 700px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide:first-child {
  opacity: 1;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.slide-1 {
  background-color: red;
  height: 150px;
  width: 200px;
}

.slide-2 {
  background-color: green;
  height: 150px;
  width: 200px;
}

.slide-3 {
  background-color: blue;
  height: 150px;
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="practice.js" defer></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="practice.css">
  <title>Welcome to Washington State - Home Page</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  <!------------Hero Page-------------->
  <header>
    <div class="carousel">
      <div class="slide slide-1">
        <div class="slide-content">Slide 1</div>
      </div>
      <div class="slide slide-2">
        <div class="slide-content">Slide 2</div>
      </div>
      <div class="slide slide-3">
        <div class="slide-content">Slide 3</div>
      </div>
    </div>
  </header>
</body>

赞(0）回复(0）举报 2023-02-14

我来回答

css 为什么页面加载时我的旋转木马旋转，然后完全停止？[duplicate]

1条答案

相关问题

热门标签

最新问答