由于我將(body)更改為(getElementById('SLIDE_BG'))，因此未顯示滑塊的影像-有解無憂

let i = 0;
let images = [];
let slideTime = 3000; // 3 seconds
 

images[0] = 'https://www.google.com/url?sa=i&url=https://ecosigna.com/design-produit/&psig=AOvVaw3k3ZipL27zVInxwZprWIw6&ust=1668355686044000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJjA87ODqfsCFQAAAAAdAAAAABAD';
images[1] = 'https://www.notreloft.com/images/2013/09/Ball-Chair-800x600.jpg';
images[2] = 'https://www.designferia.com/sites/default/files/field/image/objet-design-maison-vase-eau.jpg';

function changePicture() {
    // here I changed the (body) tag to (getElementById()) so that the slider only takes the id
    document.getElementById('SLIDE_BG').style.backgroundImage = images[i];
    if (i < images.length - 1) {
        i  ;
    } else {
        i = 0;
    }
    setTimeout("changePicture()", slideTime);
}

window.onload = changePicture;

#SLIDE_BG {
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-size: cover;
    background-image: url(https://th.bing.com/th/id/R.09cc86ad79fe8b33afdee0997c54fd71?rik=pO8HFJ+Vr5DEYQ&pid=ImgRaw&r=0);
    }

<div id="SLIDE_BG"></div>

uj5u.com熱心網友回復：

你缺少 url()

document.getElementById('SLIDE_BG').style.backgroundImage = `url(${images[i]})`;

陣列中的第一個影像也不是影像

我做了一些其他的改變

顯示代碼片段

let i = 0;
let images = [];
let slideTime = 3000; // 3 seconds


images[0] = 'https://ecosigna.com/wp-content/uploads/2021/01/visuel-de-design-produit-sketch-format-1200x800-1.jpg';
images[1] = 'https://www.notreloft.com/images/2013/09/Ball-Chair-800x600.jpg';
images[2] = 'https://www.designferia.com/sites/default/files/field/image/objet-design-maison-vase-eau.jpg';

function changePicture() {
  document.getElementById('SLIDE_BG').style.backgroundImage = `url(${images[i]})`;
  i  ;
  if (i >= images.length) i = 0;
}

window.addEventListener("DOMContentLoaded", function() {
  setInterval(changePicture, slideTime);
})

#SLIDE_BG {
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-size: cover;
  background-image: url(https://th.bing.com/th/id/R.09cc86ad79fe8b33afdee0997c54fd71?rik=pO8HFJ+Vr5DEYQ&pid=ImgRaw&r=0);
}

<div id="SLIDE_BG"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/533100.html

標籤：javascriptdom滑块

上一篇：為什么我的一些JSON資料沒有顯示在我的表格視圖中？

下一篇：反應改變背景顏色