jQuery gambar skrin penuh karusel perkongsian kod kesan khas dengan progress bar_jquery

Contoh dalam artikel ini menerangkan kesan karusel imej skrin penuh jQuery dengan bar kemajuan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kesan karusel gambar skrin penuh dengan bar kemajuan yang dilaksanakan oleh jQuery ialah kod kesan khas untuk laman web rasmi telefon mudah alih oppo dengan bar kemajuan karusel gambar skrin penuh dilaksanakan berdasarkan jQuery, yang mencapai kesan hebat, ringkas dan elegan
运行效果图：                  -------------------查看效果 下载源码----------- --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
(1) Perkenalkan gaya CSS di kawasan kepala:

link rel="stylesheet" type="text/css" href="css/style.css">

(2) kod js:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper();
function jummper(){
 $(".pic ul li").eq(i).find("img").css("left","-1180px");
 $(".pic ul li").eq(i).find("p").css("width","0px");
 $(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){
 //当图片移动完成后再加载进度条
 //alert("当图片移动完成后再做操作");
 $(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){
 $(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){
 i++;
 if(i>2)
 i=0;
 $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
 });
 });
 });
}
setInterval("jummper()",9100);
</script>

Kod kesan khas karusel imej skrin penuh jQuery dengan bar kemajuan yang dikongsi dengan anda adalah seperti berikut

 

 

 
 

 

 
 

 
 

 

 
 

 
 

 

 
 


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
jummper();
function jummper(){
 $(".pic ul li").eq(i).find("img").css("left","-1180px");
 $(".pic ul li").eq(i).find("p").css("width","0px");
 $(".pic ul li").eq(i).find("img").animate({left:"0px"},500,function(){
 //当图片移动完成后再加载进度条
 //alert("当图片移动完成后再做操作");
 $(".pic ul li").eq(i).find("p").animate({width:"1174px"},8000,function(){
 $(".pic ul li").eq(i).find("img").animate({left:"1180px"},500,function(){
 i++;
 if(i>2)
 i=0;
 $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
 });
 });
 });
}
setInterval("jummper()",9100);
</script>


适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

Di atas ialah kod kesan khas karusel imej skrin penuh dengan bar kemajuan yang dikongsi dengan anda. Saya harap anda boleh menyukainya dan menggunakannya dalam amalan.