Ở bài viết này mình sẽ hướng dẫn bạn cách để thay đổi hình nền theo thời gian sử dụng Javascript. Bạn có thể xem trước demo để rõ hơn thủ thuật này
Demo
Hướng dẫn
Thêm thuộc tính sau cho thẻ
body trong template
background:url('https://2.bp.blogspot.com/-wWyiVOpcjnY/XOrhL0CKakI/AAAAAAAAAq4/NPpDGpQ7Ua88XH3MZwIX9bdE807KD7cQACLcBGAs/s1600/BWM.jpg')no-repeat fixed center center;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;transition: all 1.0s ease;
Dán đoạn mã sau trước thẻ đóng
</head>
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://2.bp.blogspot.com/-u5_7zeGUICo/XOrhK2B8hHI/AAAAAAAAAqo/hRMqOedvqGM545JDJYMEYzdEWXjgZqM_gCLcBGAs/s1600/BMW.jpg',
'https://2.bp.blogspot.com/-Gp7UwdVXRio/XOrhK3369PI/AAAAAAAAAqs/HDWi5KwkyZIEYCpZCAIV5Mzzn_e3OWqBwCLcBGAs/s1600/BMW%2Bi8.jpg',
'https://1.bp.blogspot.com/-7drhGjyvQUE/XOrhK0votII/AAAAAAAAAqw/iZvQXuPq6xgvxMY6xB0fXZept8viO8VzgCLcBGAs/s1600/BMW%2B01.jpg',
'https://1.bp.blogspot.com/-IPwKI698Thw/XOrhLiS7_KI/AAAAAAAAAq0/erPjz4es7booyfhoOx_PlNg71ettkhfXwCLcBGAs/s1600/BMW02.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)});
}
}
Bạn có thể thay đổi 5000 thành số khác, 5000 tương dương với 5 giây hình nền sẽ đổi 1 lần. Đừng quên thay ảnh nền sao cho phù hợp với blog của bạn, mình demo hơi xấu
Cảm ơn đã theo dõi, chúc bạn thành công!