自己写的简单的轮播图

代码部分：
<!DOCTYPE html>
<html>
    <head>
        
<style type="text/css">
    *{margin:0px; padding:0px;}
    .flash{100%; height:400px;  overflow:hidden;
            position:relative;color:#fff;}
    .flash ul.con li{list-style-type:none;100%; height:400px; 
                    position:absolute; left:0px; top:0px;}
                    
    .flash ul.but{ 200px; position:absolute;top:350px; left:45%; z-index:222;}
    
    .flash ul.but li{13px; height:13px; display:inline-block;float:left;background:url("images/dot.png") -13px 0px; margin:0 5px;}
    
    .flash ul.but li.current{background:url("images/dot.png") 0px 0px;}

</style>

    </head>
<body>
<div class="flash">
    <ul class="con">
        <li style="background:url('images/img1.jpg') center;">0</li>
        <li style="background:url('images/img2.jpg') center">1</li>
        <li style="background:url('images/img3.jpg') center">2</li>
        <li style="background:url('images/img4.jpg') center">3</li>
    </ul>

<!--     <ul class='but'>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->
    <!-- 小图标 -->
    

</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>





<script>
    //没有图标版
    $(function(){
        
        index=-1;
        Time = setInterval(function(){
            index++;
            if(index==3){
                index=-1;
            }
            $('.con li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            
        },3000);
                
    })

</script>



<!--
小图标版
<script type="text/javascript">
    var index = 0;
    var times;
    var nowIndex=0;
    time=setInterval(function times(){
        index++;
        if(index>3){index=0}
        $(".con li").eq(index).fadeIn().siblings().fadeOut();
        $(".but li").eq(index).addClass('current').siblings().removeClass('current');
    },3000);
    

    $('.but li').mouseover(function(){
        clearInterval(time);
        $(this).addClass('current').siblings().removeClass('current');
    
        $(".con li").eq($(".but li").index($(this))).fadeIn().siblings().fadeOut();
        
        
    })
    


    $('.but li').mouseout(function(){
        index=-1;
        time=setInterval(function times(){
        index++;
        if(index>3){
        index=0}
        $(".con li").eq(index).fadeIn().siblings().fadeOut();
        $(".but li").eq(index).addClass('current').siblings().removeClass('current');
        },3000);
    })

    

    
</script>
-->




</body>
</html>
人如代码，规矩灵活；代码如诗，字句精伦。