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

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

WBOY

Lepaskan： 2016-05-16 15:39:13

asal

1265 orang telah melayarinya

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">

Salin selepas log masuk

(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>

Salin selepas log masuk

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





jQuery带进度条全屏图片轮播代码








 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


<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、傲游、搜狗、世界之窗.

Salin selepas log masuk

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.