如何使用 JavaScript 在后台轮播 GIF？

Question

我很难使用 javascript 在身体背景中旋转 gif。我已经在 css 正文中设置了背景，并在 style.css 中的 root 中设置了一个变量，以便在 javascript 中访问这个变量。这种方式行不通。我的 javascript 代码很完美，但我无法更改 style.css 中的 url。任何人都可以帮助我吗？谢谢 var index=0;     var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array     var totalImages = images.length;     function slideImages(){       document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index               if(index<totalImages-1){             index++;        }        else        {            index=0;        }            setTimeout(slideImages,250)     }     window.onload = slideImages; :root {      --bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);    }        body {      font-family: 'Montserrat', sans-serif;      min-height: 100vh;      max-height: 100vh;      margin: 0;      color: #fff;      display: -webkit-box;      display: flex;      -webkit-box-orient: vertical;      -webkit-box-direction: normal;              flex-direction: column;      background: var(--bg-change-gif);      background-size: cover;      height: 100%;      overflow: hidden;          }

Answer 1

您的代码在这里有一点错误：

document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index

它会抛出一个错误，说url未定义。你应该把它改成这样：

document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index

这是您的更新片段！

var index=0;

 var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array

 var totalImages = images.length;

 function slideImages(){

   document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index

   

    if(index<totalImages-1){ 

        index++;

    }

    else

    {

        index=0;

    }

    setTimeout(slideImages,250)

 }

 window.onload = slideImages;

:root {

  --bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);

}

body {

  font-family: 'Montserrat', sans-serif;

  min-height: 100vh;

  max-height: 100vh;

  margin: 0;

  color: #fff;

  display: -webkit-box;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

          flex-direction: column;

  background: var(--bg-change-gif);

  background-size: cover;

  height: 100%;

  overflow: hidden;

  

}