[JS + CSS] Thay đổi hình nền website theo thời gian

Ở bài viết này mình sẽ hướng dẫn các bạn cách làm sao để thay đổi hình nền theo thời gian sử dụng Javascript. Các bạn có thể xem trước demo trước khi quyết định có nên thêm vào blog/website của mình hay không

Demo​

Thực hiện
Bước 1: CSS

Code:

body {background:url('https://1.bp.blogspot.com/-TBGqka33pt8/UzsBjJau3BI/AAAAAAAAOBM/-GOF_49AEis/s0/YouTube-Logo-Widescreen-Wallpaper.jpg')no-repeat fixed center center;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;transition: all 1.0s ease;}

Bước 2: Chèn đoạn Javascript sau vào trước thẻ đóng </head> trong template sau đó lưu lại và xem kết quả

Code:

<script type="text/javascript">
var num;
var temp=0;
var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
var preloads=[];
/* add any number of images here */
preload(
'https://1.bp.blogspot.com/-TBGqka33pt8/UzsBjJau3BI/AAAAAAAAOBM/-GOF_49AEis/s0/YouTube-Logo-Widescreen-Wallpaper.jpg',
'https://3.bp.blogspot.com/-oVYf6cyPJQ0/Uzty2W6T0_I/AAAAAAAAOCE/4tg8Cug3AqM/s0/2.jpg',
'https://2.bp.blogspot.com/-p_oge-gkZ1Q/UztzJKaAklI/AAAAAAAAOCM/05y2C7t1Zn0/s0/1.jpg',
'https://4.bp.blogspot.com/-yYAY4NwjsPY/UztzZXuF56I/AAAAAAAAOCU/jNq7JSCJMj0/s0/3.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
function rotateImages() {
num=Math.floor(Math.random()*preloads.length);
if(num==temp){
rotateImages();
}
else{
document.body.style.backgroundImage='url('+preloads[num].src+')';
temp=num;
setTimeout(function(){rotateImages()},speed);
}
}

if(window.addEventListener){
window.addEventListener('load',function(){setTimeout(function(){rotateImages()},speed)},false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',function(){setTimeout(function(){rotateImages()},speed)});
}
}
</script>

Tùy chỉnh:

• var speed=5000: Tương ứng với cứ 5s hình nền sẽ thay đổi
• Thay đổi những đường link thành link hình ảnh nền của bạn