Xem Demo
CODE:
<style type="text/css">
body {background:url('http://chobaohanh.com/files/assets/1.jpg')no-repeat fixed center center;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;transition: all 1.0s ease;}
</style>
<script type="text/javascript">
var num; var temp=0; var speed=5000;/* thoi gian tinh bag mili giay */
var preloads=[]; /* add any number of images here */
preload( 'http://chobaohanh.com/files/assets/1.jpg', 'http://chobaohanh.com/files/assets/2.jpg', 'http://chobaohanh.com/files/assets/4.jpg', 'http://chobaohanh.com/files/assets/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>
|
Các thay thế link ảnh tô đen trên code để được hình như ý muốn, thời gian 5000 = 5s
Copy code vào phần header hay footer để có hiệu ứng trên toàn site.
Các bạn tham gia nhóm Cộng đồng Webmienphi.Vn trên FB để cùng chia sẻ kinh nghiệm làm website nha https://www.facebook.com/groups/webienphi.vn/ |
