本文主要使用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的效果。
通过上面两条语句就实现了,背景图片的缓慢轮换。