进度条轮播【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:0;
        }
        
        .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和图片路径自己加载！