[科技]基于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>