进度条轮播【BackgroundColor】

直接贴代码先看

HTML：

         <div class="bannar">

            <div class="img">

                <ul>

                    <li style="background:url(img/1.jpg);display:block;"></li>

                    <li style="background:url(img/2.jpg);"></li>

                    <li style="background:url(img/3.jpg);"></li>

                    <li style="background:url(img/4.jpg);"></li>

                </ul>

            </div>

            <div class="text">

                <ul>

                    <li>0</li>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                </ul>

            </div>

            <div class="nav">

                <ul>

                    <li><p></p></li>

                    <li><p></p></li>

                    <li><p></p></li>

                    <li><p></p></li>

                </ul>

            </div>

        </div>

CSS：

    <style>

        *{

            margin:0 auto;

            padding:;

        }

        .bannar{

            width:100%;

            height:490px;

            position:relative;

        }

        .img{

            width:100%;

            height:490px;

            overflow:hidden;

        }

        .img ul li{

            width:100%;

            height:490px;

            list-style-type: none;

            display:none;

        }

        .text{

            width:1000px;

            height:6px;

            position:absolute;

            bottom:28px;

            left:50%;

            margin-left:-500px;

        }

        .nav{

            width:1000px;

            height:10px;

            position:absolute;

            bottom:4px;

            left:50%;

            margin-left:-500px;

        }

        .text ul li{

            width:200px;

            height:100%;

            float:left;

            margin-left:38px;

            list-style-type: none;

        }

        .nav ul li{

            width:200px;

            height:10px;

            float:left;

            margin-left:38px;

            list-style-type: none;

            background:gray;

        }

        .nav ul li p{

            width:0px;

            height:100%;

            background:red;

            float:left;

        }

    </style>

Javascript：

       <script>

            var i=0;

            var time_id=null;

            function auto(){

                $(".nav ul li").eq(i).find("p").animate({

                    "width":"200px"

                },3900,function(){

                    i++;

                    $(this).css("width", '0px');

                    if(i>3){

                        i=0;

                    }

                    $(".img ul li").eq(i).fadeIn(300).siblings().fadeOut(300);

                });

            }

            time_id=setInterval("auto()",4000);

            $(".text ul li").click(function(){

                $(".nav ul li").find("p").stop().css("width","0px");

                clearInterval(time_id);

                i=$(this).index();

                $(".img ul li").eq(i).fadeIn().siblings().fadeOut();

                auto();

                time_id=setInterval("auto()",4000);

            });

            $(".nav ul li").click(function(){

                $(".nav ul li").find("p").stop().css("width","0px");

                clearInterval(time_id);

                i=$(this).index();

                $(".img ul li").eq(i).fadeIn().siblings().fadeOut();

                auto();

                time_id=setInterval("auto()",4000);

            })

        </script>

效果图：

PS：  jQ和图片路径自己加载！