바디 배경을 매 10 초마다 변경합니다.

Question

저는 CSS를 사용하여 웹 사이트의 바디 배경을 바꿀 수있는 아주 간단하고 가벼운 코드를 찾고 있습니다. jquery를 사용하면 쉽습니다. 그리고 CSS, 맞죠?

어떻게 할 수 있습니까?

Answer 1

JavaScript의 setTimeout() 함수를 사용할 수 있습니다. 다음은이를 사용하는 방법의 예입니다.

setTimeout()에는 2 개의 매개 변수가 필요하며 하나는 함수이고 다른 하나는 시간 초과가 지속되는 정수입니다.

은 그래서 예를 들어, 당신은 할 수있다 :이 경로로 지정된 이미지의 배열을 만듭니다

$(function() { 
    var newBg = ['img1.png', 'img2.jpg', 'img3.png']; 
    var path="img/"; 
    var i = 0; 

    var changeBg = setTimeout(function() { 
     $('body').css({backgroundImage : 'url(' path + newBg[i] + ')'}); 
     if(i == newBg.length) 
      i=0; 
     else 
      i++; 
    }, 10000); 
}); 

. 따라서 arrayList의 길이를 검사하는 변수를 만들고 변수 i를 재설정해야하는지 여부를 결정합니다.

그래서 나는 희망이 도움이 :)

Answer 2

맞춤 background.js 사용자가 웹 사이트의 기본 배경을 변경할 수 있도록 가벼운 jQuery 플러그인이며, 로컬 스토리지에 선택한 배경을 절약 할 수 있습니다. 이 플러그인은 웹 사이트의 성능에 아무런 타협없이 웹 사이트 또는 웹 앱에 쉽게 추가 할 수 있습니다.

https://github.com/CybrSys/custom-background.js

Answer 3

은 쉽게 jQuery를 함께이 작업을 수행 할 수 있습니다.

간단한 자바 스크립트 함수 당신은 데모 및 설명을 작업을위한 Changing background color every X seconds in Javascript을 확인할 수 있습니다 두 가지 색상의 모든 X의 초 기능 toggle_color (COLOR1, COLOR2, cycle_time, WAIT_TIME) {

setInterval(function first_color() { 
    $("body").animate({ 
     backgroundColor: color1 
    }, 1000, function() { 
     setTimeout(change_color, wait_time); 
    }); 
}, cycle_time); 

function change_color() { 
    $("body").animate({ 
     backgroundColor: color2 
    }, 1000, function() { 
     setTimeout(function() {}, wait_time); 
    }); 
} 
} 

전환합니다.