Javascript实现背景图片淡入淡出切换功能

 Published On February 05, 2015

花了半天看javascript语法,再花半天写,也算是对Javascript有所心得吧。

Demo

Code

先加载4张图片。

<div id="background_cycler">
    <img id="img1" src="bcg1.jpg" style="opacity:0;" />
    <img id="img2" src="bcg2.jpg" style="opacity:0;" />
    <img id="img3" src="bcg3.jpg" style="opacity:0;" />
    <img id="img4" src="bcg4.jpg" style="opacity:0;" />
</div>

然后执行RandomStart()。随机选择一张opacity==0的图片使其opacity=1

function RandomStart() {
    i = Randompick();
    $('#img' + i).css('opacity', 1);
}

然后每隔5秒执行一次RandomChange()。随机一张opacity==0的和找到现在opacity==1的。执行淡入淡出。

function RandomChange() {
    i = Randompick();
    // i fade in, j fade out
    for (j = 1; j <= Imgnum; j++) {
        if ($('#img' + j).css('opacity') == '1')
            break;
    }
    Fadeinout();
}

按一定的速率每执行一次该函数就把图片i变深一点,图片j变淡一点。 一些注意点:

  • 在进行加减的时候要显示把字符串解析成float,不然会当成字符串处理,造成加减和比较时错误。
  • Javascript没有min,max(可能有Math.min)不过我手写了一个。
  • 因为javascript是异步调用,即单线程,诸如slee(s)这样的会打断异步。所以javascript没有暂停函数。一个for循环中有暂停的话,只能另写一个函数,然后用不停地递归调用来实现。
  • setTimeout("FunctionName",time)的参数传递。前一个是字符串参数,所以在调用的时候如果函数需要传参数,那么必须用 setTimeout("FunctionName("+i+","+j+")",time) 的方式进行调用。(后来我就索性没写,全都开全局变量。)
function Fadeinout()
{
	$('#img' + i).css('opacity', Min(parseFloat($('#img' + i).css('opacity')) + changeValue, 1)); 
    $('#img' + j).css('opacity', Max(parseFloat($('#img' + j).css('opacity')) - changeValue, 0.0));
    console.log($('#img' + i).css('opacity'));
    console.log($('#img' + j).css('opacity'));
    if(($('#img' + i).css('opacity')==1)&&($('#img' + j).css('opacity')==0))
    {
    	//alert('abort');
    	$('#img'+i).css('opacity',1);
    	$('#img'+j).css('opacity',0);
    	return;
    }
    setTimeout("Fadeinout()",Period*1000);
}

Tags: JavaScript

Comments: