2016-09-27 7 views
1

내 웹 사이트에서 매 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> 

답변

2

그것은 조금 불분명하지만 난 당신이 작동 실행할 수 있습니다, 당신이 아래의 코드처럼 뭔가가 필요 같아요 :

$(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>

0
여기

내 현재 코드입니다

스크립트 코드를 사용하십시오.

<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에서 3으로 수정해야만 원하는대로 작동합니다. 예 : image1, image2 및 image3

관련 문제