基于jQuery带进度条全屏图片轮播代码。这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效。效果图如下：
实现的代码。
html代码：
<div class="pic">
<ul>
<li style="background: url(images/bg1.jpg) center;">
<img src="data:images/con1.png">
<div class="nav">
</div>
<div class="bar">
<p>
</p>
</div>
</li>
<li style="background: url(images/bg2.jpg) center;">
<img src="data:images/con2.png">
<div class="nav">
</div>
<div class="bar">
<p>
</p>
</div>
</li>
<li style="background: url(images/bg3.jpg) center;">
<img src="data: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>