本文實例講述了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帶進度條全螢幕圖片輪播特效代碼如下
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帶進度條全螢幕圖片輪播特效程式碼，希望大家可以喜歡，並應用到實作中。
