Saya mengalami kesulitan untuk carousal gif di latar belakang tubuh menggunakan javascript. Saya telah mengatur latar belakang di badan css dan mengatur variabel di root di style.css untuk mengakses variabel ini di javascript. Cara ini tidak bekerja. kode javascript saya sempurna tetapi saya tidak dapat mengubah url di style.css. Adakah yang bisa membantu saya? Terima kasih

 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;
      
    }



   
0
kodder360 2 Juli 2020, 14:21

1 menjawab

Jawaban Terbaik

Kode Anda memiliki sedikit kesalahan di sini:

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

Ini akan menimbulkan kesalahan yang mengatakan url tidak ditentukan. Anda harus mengubahnya menjadi ini:

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

Ini cuplikan terbaru Anda!

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;
  
}
1
GAURAV KUMAR JHA 2 Juli 2020, 11:29