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

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

WBOY

發布： 2016-05-16 15:39:13

原創

1266 人瀏覽過

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