通過Jquery實現背景圖的輪換

本文主要使用Jquery實現背景圖的緩慢顯隱，變換。

HTML代碼片段：

<header role="banner" id="background_image">
	<div style="height:315px"></div>
	<div style="background-color:rgba(100,100,100,0.6);width:100%;height:50px;">
	<div id="biaoqian">讓我的悲傷逆流成河。</div>
	<div style="padding-top:10px">
		<div class="circle" id="circle_1" οnmοuseοver="circle_control(1)" style="width:20px; height:20px; background-color:gray; border-radius:20px;"></div>
		<div class="circle" id="circle_2" οnmοuseοver="circle_control(2)" style="width:20px; height:20px; background-color:gray; border-radius:20px;"></div>
		<div class="circle" id="circle_3" οnmοuseοver="circle_control(3)" style="width:20px; height:20px; background-color:gray; border-radius:20px;"></div>
		<div class="circle" id="circle_4" οnmοuseοver="circle_control(4)" style="width:20px; height:20px; background-color:gray; border-radius:20px;"></div>
		<div class="circle" id="circle_5" οnmοuseοver="circle_control(5)" style="width:20px; height:20px; background-color:gray; border-radius:20px;"></div>
		<div class="circle" id="circle_6" οnmοuseοver="circle_control(6)" style="width:20px; height:20px; background-color:#bad8d5; border-radius:20px;"></div>
	</div>
	</div>
</header>

JavaScript代碼片段：

		function circle_control(circle)
		{
			rotate_1 = circle;
			$("#background_image").animate({opacity:"0"},1000,function(){$(this).css("background-image","url('image/top/"+circle+".jpg')")});
			for(var i=1;i<7;i++)
			{
				if(i==circle)
				{
					$("#circle_"+i)[0].style.backgroundColor="#bad8d5";
				}
				else
				{
					$("#circle_"+i)[0].style.backgroundColor="gray";
				}
			}
			$("#background_image").animate({opacity:"1"},1000);
			rotate_1--;
			if(rotate_1==0)
			{
				rotate_1=6;
			}
			setTimeout("circle_control("+rotate_1+")",10000);
		}
		setTimeout("circle_control("+rotate_1+")",10000);

該程序主要實現的功能就是，選擇那一個圓點就顯示那一副背景圖，然後從該圖開始，每隔10秒換一張圖片。

$("#background_image").animate({opacity:"0"},1000,function(){$(this).css("background-image","url('image/top/"+circle+".jpg')")});

上面這條語句表示：背景圖片緩慢把透明度從1變成0後，把背景圖片換成另一張背景圖的效果。

$("#background_image").animate({opacity:"1"},1000);

上面的這條語句表示：背景圖片緩慢把透明度從0變成1的效果。

通過上面兩條語句就實現了，背景圖片的緩慢輪換。