基于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>
via：http://***/Article/35027