通过Jquery实现背景图的轮换

xiaoxiao2021-02-27  375

本文主要使用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的效果。

通过上面两条语句就实现了,背景图片的缓慢轮换。

转载请注明原文地址: https://www.6miu.com/read-2129.html

最新回复(0)