jQuery帶進度條全螢幕圖片輪播特效代碼分享_jquery

本文實例講述了jQuery帶進度條全螢幕圖片輪播特效。分享給大家供大家參考。具體如下：
jQuery實現的帶進度條轉接全螢幕圖片輪播效果是一款基於jQuery實現的oppo手機官網首頁帶進度條全屏圖片輪播特效代碼,實現效果大氣，簡潔大方
運作效果圖：                  -------------------檢視效果 下載原始碼----------- --------

小提示：瀏覽器中如果無法正常運作，可以嘗試切換瀏覽模式。
（1）在head區域引入CSS樣式：

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

（2）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>

為大家分享的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、傲游、搜狗、世界之窗.

以上就是為大家分享的jQuery帶進度條全螢幕圖片輪播特效程式碼，希望大家可以喜歡，並應用到實作中。