本文實例講述了jQuery帶進度條全屏圖片輪播特效。分享給大家供大家參考。具體如下：
jQuery實現(xiàn)的帶進度條轉(zhuǎn)接全屏圖片輪播效果是一款基于jQuery實現(xiàn)的oppo手機官網(wǎng)首頁帶進度條全屏圖片輪播特效代碼,實現(xiàn)效果大氣，簡潔大方
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
（1）在head區(qū)域引入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帶進度條全屏圖片輪播特效代碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery帶進度條全屏圖片輪播代碼</title><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><div class="pic"> <ul> <li style="background:url(images/bg1.jpg) center;"> <img src="images/con1.png"> <div class="nav"></div> <div class="bar"><p></p></div> </li> <li style="background:url(images/bg2.jpg) center;"> <img src="images/con2.png"> <div class="nav"></div> <div class="bar"><p></p></div> </li> <li style="background:url(images/bg3.jpg) center;"> <img src="images/con3.png"> <div class="nav"></div> <div class="bar"><p></p></div> </li> </ul></div><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><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p></div></body></html>以上就是為大家分享的jQuery帶進度條全屏圖片輪播特效代碼，希望大家可以喜歡，并應(yīng)用到實踐中。
新聞熱點
疑難解答
