基于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://www.w2bc.com/Article/35027

在线预览    源码下载