使用html CSS和javascript創建輪播時出現問題

Question

我正在嘗試僅使用HTML，CSS和JS創建輪播。

它可以工作，但是不如我所希望的那樣。

完成一輪圖像處理后，大約需要8秒鍾才能開始顯示從第一張到最后一張的圖像，然后又停止幾秒鍾，依此類推...

此外，包含背景圖像的div的寬度為100％，高度為100vh。 我嘗試設置背景屬性，如bg-repeat ， bg-size ， bg-position ，但是我無法使圖像在屏幕上很好地顯示-設置background-size: cover時，它們的圖像會被裁剪background-size: cover ，如果我設置background-size: contain; ，它會變得太小background-size: contain; 或其他財產。

您能否檢查此“工作”演示？ 謝謝。

 var divi = document.querySelector(".divi"); srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"]; var iter = 0; setInterval(function() { if (iter == (srcArr.length)) { iter = 0; } else { divi.style.backgroundImage = "url('" + srcArr[iter] + "')"; iter++; } }, 4000); 

 * { padding: 0; margin: 0 } .divi { width: 100%; height: 100vh; background-image: url("https://picsum.photos/id/240/200/300"); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } 

 <div class="divi"></div> 

Answer 1

正如泰勒·羅珀 （ Tyler Roper）所說，當（iter == srcArr.length）時，它繼續為零值，但沒有改變圖像，因此對於下一個圖像，它們還要等待4秒。

 const divi = document.querySelector(".divi"), srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"]; var iter = -1; setInterval(function() { iter = (iter + 1) % srcArr.length; divi.style.backgroundImage = "url('" + srcArr[iter] + "')"; }, 4000); 

 * { padding: 0; margin: 0 } .divi { width: 100%; height: 100vh; background-image: url("https://picsum.photos/id/240/200/300"); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } 

 <div class="divi"></div> 

Answer 2

每四秒鍾運行一次if語句，並且只有在其結果為false ，您才更改映像。 這意味着每次它的計算結果為true （到達數組末尾），它都必須運行兩次迭代才能繼續（在這種情況下，需要8秒鍾）。

就我個人而言，我更喜歡將這樣的事情放在函數中，並在setInterval使用重復的setTimeout 。 如果您想在某個時間停止幻燈片放映，我也會返回該超時。

關於您的背景，這是一個相當廣泛的問題。 首先，我剛剛應用了background-position: center; 。

 const divi = document.querySelector(".divi"); const srcArr = ["https://picsum.photos/id/237/200/300","https://picsum.photos/id/238/200/300","https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"]; const timer = 1000; const nextImg = (imageArray, index) => { divi.style.backgroundImage = `url('${imageArray[index]}')`; index = ++index % imageArray.length; return setTimeout(()=>nextImg(imageArray, index), timer); }; const startSlideshow = imageArray => nextImg(imageArray,0); //Start slideshow const slideshow = startSlideshow(srcArr); //Stop slideshow //clearTimeout(slideshow); 

 * { padding: 0; margin: 0 } .divi { width: 100%; height: 100vh; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: center; } 

 <div class="divi"></div>