[科技]基于jQuery帶進度條全屏圖片輪播代碼
基于jQuery帶進度條全屏圖片輪播代碼。這是一款基于jQuery實現的oppo手機官網首頁帶進度條全屏圖片輪播特效。效果圖如下:
實現的代碼。
html代碼:
<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>