如何使用 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;&nbsp;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&nbsp;var totalImages = images.length;&nbsp;function slideImages(){&nbsp; &nbsp;document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index&nbsp; &nbsp;&nbsp; &nbsp; if(index<totalImages-1){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; index++;&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; index=0;&nbsp; &nbsp; }&nbsp; &nbsp; setTimeout(slideImages,250)&nbsp;}&nbsp;window.onload = slideImages;:root {&nbsp; --bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);}body {&nbsp; font-family: 'Montserrat', sans-serif;&nbsp; min-height: 100vh;&nbsp; max-height: 100vh;&nbsp; margin: 0;&nbsp; color: #fff;&nbsp; display: -webkit-box;&nbsp; display: flex;&nbsp; -webkit-box-orient: vertical;&nbsp; -webkit-box-direction: normal;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; background: var(--bg-change-gif);&nbsp; background-size: cover;&nbsp; height: 100%;&nbsp; overflow: hidden;&nbsp;&nbsp;}