如何使用 JavaScript 和用戶生成的圖像制作圖像 slider？

Question

我正在做一個項目：

1. 要求用戶從他們的設備中選擇圖像
2. 所選圖像將顯示在圖像 slider

 const slider = document.querySelector('.slider'); // load user chosen files fileInp.addEventListener('input', (e) => { const files = e.target.files; for (let file of files) { const img = new Image(); const reader = new FileReader(); reader.addEventListener('load', (e) => { img.src = e.target.result; slider.appendChild(img); img.classList.add('slide'); }) reader.readAsDataURL(file); } }) // slider const slides = document.querySelectorAll('.slide'); let counter = 0; slides.forEach((slide, index) => { slide.style.left = `${index * 100}%` }) nextBtn.onclick = () => { counter++; move(); } prevBtn.onclick = () => { counter--; move(); } function move() { if (counter <= 0) { counter = slides.length - 1; } if (counter === slides.length) { counter = 0; } slides.forEach((slide, index) => { slide.style.transform = `translateX(-${counter * 100}%)` }) }

 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;900"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Nunito", sans-serif; } body { display: grid; place-items: center; height: 100vh; }.box { display: flex; flex-direction: column; padding: 1rem; gap: 1rem; }.slider { min-width: 300px; min-height: 70px; display: flex; overflow: hidden; position: relative; }.slide { position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: center; transition: transform 250ms ease; } h1 { margin-bottom: 0.25rem; }.controls { display: flex; gap: 0.5rem; width: 100%; align-items: center; }.btn { background-color: #333; border: 0; padding: 0.5rem 0.75em; width: 12ch; text-transform: uppercase; letter-spacing: 1px; color: #fff; }.ph { background-color: #08b; width: max-content; }.btn:hover { border: 2px solid #000; border-radius: .25rem; }

 <div class="box"> <h1>Gallery</h1> <div class="slider"></div> <div class="controls"> <button class="btn" id="prevBtn">previous</button> <input hidden type="file" id="fileInp" multiple /> <.-- Just a placeholder to easily style the file input --> <button onclick="fileInp.click()" class="ph btn">choose files</button> <button class="btn" id="nextBtn">next</button> </div> </div>

我正在添加一個片段，以便您可以清楚地理解它，

使用 static HTML 標簽時，slider 工作正常，但當我使用 Z686155AF705A160A0DF7EZED 從文件輸入生成圖像時，它給出了不需要的結果。 我哪里錯了？

Answer 1

這是因為在頁面加載const slides = document.querySelectorAll('.slide'); 為空，將其移至文件load事件

 const slider = document.querySelector('.slider'); let slides = []; // load user chosen files fileInp.addEventListener('input', (e) => { const files = e.target.files; for (let file of files) { const img = new Image(); const reader = new FileReader(); reader.addEventListener('load', (e) => { img.src = e.target.result; slider.appendChild(img); img.classList.add('slide'); slides = document.querySelectorAll('.slide'); slides.forEach((slide, index) => { slide.style.left = `${index * 100}%` }) }) reader.readAsDataURL(file); } }) // slider let counter = 0; nextBtn.onclick = () => { counter++; move(); } prevBtn.onclick = () => { counter--; move(); } function move() { if (counter <= 0) { counter = slides.length - 1; } if (counter === slides.length) { counter = 0; } slides.forEach((slide, index) => { slide.style.transform = `translateX(-${counter * 100}%)` }) }

 .slide { position: absolute; height: 100%; width: 100%; top: 110px; object-fit: cover; object-position: center; transition: transform 250ms ease; } h1 { margin-bottom: 0.25rem; }.controls { display: flex; gap: 0.5rem; width: 100%; align-items: center; }.btn { background-color: #333; border: 0; padding: 0.5rem 0.75em; width: 12ch; text-transform: uppercase; letter-spacing: 1px; color: #fff; }.ph { background-color: #08b; width: max-content; }.btn:hover { background-color: #222; }

 <div class="box"> <h1>Gallery</h1> <div class="slider"></div> <div class="controls"> <button class="btn" id="prevBtn">previous</button> <input hidden type="file" id="fileInp" multiple /> <.-- Just a placeholder to easily style the file input --> <button onclick="fileInp.click()" class="ph btn">choose files</button> <button class="btn" id="nextBtn">next</button> </div>