页面加载时Carousel轮播正常转动，随后完全停止的问题求助

1. 类名冲突：自定义轮播容器使用了carousel类名，而Bootstrap官方轮播组件也使用该类名。引入的Bootstrap JS会自动初始化带有carousel类的元素，直接干扰自定义JS逻辑，导致轮播行为异常。
2. 脚本加载时机错误：自定义JS脚本放在<head>标签中，此时页面DOM尚未完全渲染，document.querySelectorAll('.slide')无法获取到目标元素，后续轮播逻辑无法正常执行。

1. 修改轮播容器类名，避免冲突 #

将HTML中的carousel类改为自定义名称（比如custom-carousel），同时同步修改CSS中的对应选择器。

2. 调整脚本加载位置 #

将自定义JS脚本移到<body>标签末尾，确保DOM元素加载完成后再执行脚本，保证能正确获取到轮播幻灯片元素。

修改后的完整代码 #

HTML

<!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">
    <!-- 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>
    <!------------Hero Page--------------->
    <header>
        <div class="custom-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>

    <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> 
    <script src="practice.js"></script>
</body>
</html>

CSS

*{
    margin: 0%;
    padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.custom-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);
}

JavaScript

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

内容的提问来源于stack exchange，提问作者xRGx901x