HTML有进度条的轮播图

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图自己测试版</title>

<!*******
设置盒子样式
*******>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
    
    
    }
.box {
    width:100%;
    height:630px;
    border:2px #333366 solid;
    overflow:hidden;
    
    }
    
.box ul li {
    list-style-type:none;    
    border:1px #66FF33 solid;
    width:100%;
    height:630px;
    position:relative;
    
    
    }    
    
.nav {
    width:100%;
    height:70px;
    rgba(0,51,153,0.3);
    background:rgba(255,255,255,0.9);
    position:absolute;
    left:0px;
    bottom:0px;
    
    }    

.bar {
    width:100%;
    height:10px;
    border:1px #66CCFF solid;
    position:absolute;
    left:0px;
    bottom:0px;
    background:url(%E8%8A%B1%E7%93%A3.png);
    }    
.bar p {
    width:100%;
    height:10px;
    background:#693;

    }
    
.box ul li img {
    left:-900px;
    top:10px;
    position:absolute;
    
    }
             


</style>

</head>

<body>

<!*******
创建一个盒子
*******>
<div class="box">

<!在盒子中无序列表>
<ul>

<li style="background:url(http://f.hiphotos.baidu.com/image/pic/item/faf2b2119313b07e97f760d908d7912396dd8c9c.jpg)">
<img src="http://edu.yunnan.cn/images/attachement/jpg/site2/20120913/1c6f6502e94411bbd3df16.jpg"/>
<div class="nav"></div>
<div class="bar"><p></p></div>
</li>

<li style="background:url(http://g.hiphotos.baidu.com/image/pic/item/35a85edf8db1cb13b7509616df54564e92584bfe.jpg)">
<img src="http://edu.yunnan.cn/images/attachement/jpg/site2/20120913/1c6f6502e94411bbd3df16.jpg"/>
<div class="nav"></div>
<div class="bar"><p></p></div>
</li>

<li style="background:url(http://img.qeo.cn/80062015101311329.jpg)">
<img src="http://edu.yunnan.cn/images/attachement/jpg/site2/20120913/1c6f6502e94411bbd3df16.jpg"/>
<div class="nav"></div>
<div class="bar"><p></p></div>
</li>


</ul>

</div>

<script type="text/jscript" src="jquery.js"></script>
<script type="text/jscript">

    var i = -1;
    auto();

    function auto() {
        
        i++;
        if(i>2) {
            i=0;
            }
        
        $(".box ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
        
        $(".box ul li").eq(i).find("img").animate({left:"0px"},500,function() {
            
            $(".box ul li").eq(i).find("p").animate({width:"100%"},8000,function(){
                
                $(".box ul li").eq(i).find("img").animate({left:"100%"},500);
                $(".box ul li").eq(i).find("img").animate({left:"-100%"},0);
                
                $(".box ul li").eq(i).find("p").css("width","0px");
                });
            });
        }

    setInterval("auto()",9200);


</script>

</body>
</html>
宽容他人，放过自己。

目录
