在輪播的每張幻燈片中添加進度條 (JavaScript)

Question

有一個愉快的星期六。 我要問一些關於在輪播中添加進度條的問題，進度條代碼參考在https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3中。 但是在我將它應用到我的代碼之后，它根本不起作用。 它只表明cannot set properties of undefined (setting 'width') 。 我是 JavaScript 的新手，所以請大家幫我解決這個問題。 這是我的片段：

 window.onload = function() { var slides = document.getElementsByClassName('carousel-item'), addActive = function(slide) {slide.classList.add('active-carousel')}, removeActive = function(slide) {slide.classList.remove('active-carousel')}, time = 3000, a = 0, timeLine = function() {if(a == 0) {a = 1; var elem = document.getElementsByClassName('progress-line'), width = 1, id = setInterval(frame,time/100); function frame() {if(width >= 100) {clearInterval(id); a = 0;} else {width++; elem.style.width = width + "%";}}}}; //this one I'm not sure the code is right addActive(slides[0]); setInterval(function () { for (var i = 0; i < slides.length; i++){ if (i + 1 == slides.length) { addActive(slides[0]); timeLine(slides[0]); slides[0].style.zIndex = 3; slides[i].classList.add('show-carousel'); setTimeout(function() { slides[i].classList.remove('show-carousel'); },1000); setTimeout(removeActive, 500, slides[i]); break; } if (slides[i].classList.contains('active-carousel')) { slides[i].classList.add('show-carousel'); timeLine(slides[i + 1]); setTimeout(function() { slides[i].classList.remove('show-carousel'); },1000); slides[i].removeAttribute('style'); setTimeout(removeActive, 500, slides[i]); addActive(slides[i + 1]); break; } } }, time); }

 *{box-sizing: border-box;} .carousel { position: relative; width: 400px; height: 270px; overflow: hidden; } .carousel-item { display: none; flex-direction: column; position: absolute; width: 100%; height: 100%; border: none; } .progress-line { position: absolute; width: 0%; height: 2px; background-color: black; z-index: 9; } .active-carousel { display: flex; animation-name: slide-in; animation-duration: 1s; } @keyframes slide-in { 0% {display: none; bottom: 100%;} 1% {display: flex; bottom: 100%;} 100% {display: flex; bottom: 0%;} } .show-carousel { display: flex; animation-name: slide-out; animation-duration: 1.1s; } @keyframes slide-out { 0% {display: flex; bottom: 0%;} 99% {display: flex; bottom: -100%;} 100% {display: none; bottom: -100%;} } div {height: 100%;} .red {background-color: red;} .green {background-color: green;} .yellow {background-color: yellow;} .violet {background-color: violet;}

 <div class="carousel"> <div class="progress-line"> </div> <div class="carousel-item"> <div class="red"></div> </div> <div class="carousel-item"> <div class="green"></div> </div> <div class="carousel-item"> <div class="yellow"></div> </div> <div class="carousel-item"> <div class="violet"></div> </div> </div>

Answer 1

 window.onload = function() { var slides = document.getElementsByClassName('carousel-item'), addActive = function(slide) {slide.classList.add('active-carousel')}, removeActive = function(slide) {slide.classList.remove('active-carousel')}, time = 3000, a = 0, timeLine = function() {if(a == 0) {a = 1; let elem = document.querySelector('.progress-line'); let width = 1; var id = setInterval(frame,time/100); function frame() { if(width >= 100) { clearInterval(id); a = 0;} else {width++; elem.style.width = width + "%";}}}}; addActive(slides[0]); setInterval(function () { for (var i = 0; i < slides.length; i++){ if (i + 1 == slides.length) { addActive(slides[0]); timeLine(slides[0]); slides[0].style.zIndex = 3; slides[i].classList.add('show-carousel'); setTimeout(function() { slides[i].classList.remove('show-carousel'); },1000); setTimeout(removeActive, 500, slides[i]); break; } if (slides[i].classList.contains('active-carousel')) { slides[i].classList.add('show-carousel'); timeLine(slides[i + 1]); setTimeout(function() { slides[i].classList.remove('show-carousel'); },1000); slides[i].removeAttribute('style'); setTimeout(removeActive, 500, slides[i]); addActive(slides[i + 1]); break; } } }, time); }

 *{box-sizing: border-box;} .carousel { position: relative; width: 400px; height: 270px; overflow: hidden; } .carousel-item { display: none; flex-direction: column; position: absolute; width: 100%; height: 100%; border: none; } .progress-line { position: absolute; width: 0%; height: 2px; background-color: black; z-index: 9; } .active-carousel { display: flex; animation-name: slide-in; animation-duration: 1s; } @keyframes slide-in { 0% {display: none; bottom: 100%;} 1% {display: flex; bottom: 100%;} 100% {display: flex; bottom: 0%;} } .show-carousel { display: flex; animation-name: slide-out; animation-duration: 1.1s; } @keyframes slide-out { 0% {display: flex; bottom: 0%;} 99% {display: flex; bottom: -100%;} 100% {display: none; bottom: -100%;} } div {height: 100%;} .red {background-color: red;} .green {background-color: green;} .yellow {background-color: yellow;} .violet {background-color: violet;}

 <div class="carousel"> <div class="progress-line"> </div> <div class="carousel-item"> <div class="red"></div> </div> <div class="carousel-item"> <div class="green"></div> </div> <div class="carousel-item"> <div class="yellow"></div> </div> <div class="carousel-item"> <div class="violet"></div> </div> </div>

• var在函數內部不起作用，請使用let