背景にランダムな画像を作る方法

5分ごとに新しい画像に変更する私のウェブサイトに行きたい。可能であれば、これをjQueryで行いたいと思います。背景にランダムな画像を作る方法

私は3つの画像をループしたいと思います。これを行う方法？ここで

は私の現在のコードです：

<!DOCTYPE html> 
<html> 
<head> 
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script> 
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script> 

    <script type='text/javascript'> 
     $(document).ready(function(){ 
      setInvetval(function(){ 
     $('body').css('background-image', 'image-path'); 
    }, 300000); 
    }); 
    </script> 
</head> 

<body> 

</body> 
</html>

出典

2016-09-27 BoeNoe

それは少し不明だが、私はあなたが以下のコードのようなものが必要と思い、あなたはそれが動作を実行することができます

$(document).ready(function(){ 
 
    // initializing the index 
 
    var actual = 0; 
 

 
    // interval implementation 
 
    setInterval(function(){  
 
    
 
     // setting the image 
 
     $('body').css('background', "url('" + my_image_array[actual] + "')"); 
 
     
 
     // contrilling the index 
 
     if (actual == my_image_array.length) { 
 
      actual = 0; 
 
     } else { 
 
      actual = actual + 1; 
 
     } 
 
     
 
     // debugging the index 
 
     //console.log(actual); 
 
    }, 800); // 300000, have setted short time for tests 
 
}); 
 

 
// Instantiating array 
 
var my_image_array = new Array(); 
 

 
// Some images in an array structure 
 
my_image_array[0] = 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg'; 
 
my_image_array[1] = 'http://static8.depositphotos.com/1003153/893/v/950/depositphotos_8938809-Example-rubber-stamp.jpg'; 
 
my_image_array[2] = 'http://thumb7.shutterstock.com/display_pic_with_logo/436114/268701041/stock-vector-example-blue-square-grunge-textured-isolated-stamp-268701041.jpg'; 
 
my_image_array[3] = 'http://garsonadvogados.com.br/wp-content/uploads/2015/08/example3.jpg'; 
 
my_image_array[4] = 'http://st.depositphotos.com/1023799/2906/v/950/depositphotos_29066941-Grunge-example-rubber-stamp-vector.jpg';

/* basic style to the body */ 
 
body{width:100%; height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body></body>

出典

2016-09-27 17:40:13 RPichioli

スクリプトコードを使用してください。

<script type='text/javascript'> 
     $(document).ready(function() { 
      var timeout = 300000; 
      var i = 1; 
      var action = function() { 
       // Do stuff here 
       if (i < 3) { 
        i++; 
       } else { 
        i = 1; 
       } 
       console.log("image" + i); 
       // $('body').css('background', "url('path/image"+i+ "')"); you can possible put your image here. 
       setTimeout(action, timeout); 
      }; 
      action(); 

     }); 
    </script>

ここでは、無限に動作する再帰関数を1つ作成していますが、これまで設定していたタイムアウト変数を変更できます。ブラウザのコンソールで確認してください。あなたはあなたが望むように動作するように、1から3までのあなたの画像番号のポストフィックスを与える必要があります。例えばimage1、image2、image3など

出典

2016-09-27 17:46:00 user2105662

背景にランダムな画像を作る方法

答えて

関連する問題