背景图像脚本的平滑过渡?

时间:2015-01-01 13:46:12

标签: javascript html css random background-image

所以我发现了一个javascript,我发现它最终会起作用并改变我的背景。问题是图像之间的过渡根本不平滑。有人可以帮助我 - 我希望平滑过渡,也许在图像之间消失。

    <script type="text/javascript">

   var num;
   var temp=0;
   var speed=10000; 
   var preloads=[6];
preload(
        'images/bg-1.jpg',
        'images/bg-2.jpg',
        'images/bg-3.jpg',
        'images/bg-4.jpg',
        'images/bg-5.jpg',
        'images/bg-6.jpg',
        'images/bg-7.jpg',
        'images/bg-8.jpg',
        'images/bg-9.jpg',
        'images/bg-10.jpg',
        'images/bg-11.jpg',
        'images/bg-12.jpg',
        'images/bg-13.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',rotateImages,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',rotateImages);
  }
 }
</script>

0 个答案:

没有答案