jq寫一個輪播圖

css代碼：

<style>
    *{
        padding:0;
        margin:0;
    }
    #box{
        width:300px;
        height:200px;
        margin:50px auto;
        overflow: hidden;
        position:relative;
    }

    #box img{
        width:300px;
        height:200px;
        display: none;
    }
    #left,#right{
        width:20px;
        height:30px;
        background:black;
        position:absolute;
        top:calc(50% - 15px);
        opacity:0.5;
        color:white;
        font-size: 20px;
        line-height:30px;
        text-align: center;
        cursor:pointer;
    }
    #right{
        right:0;
    }
    #nav{
        width:90px;
        height:20px;
        position:absolute;
        bottom:0;
        left:110px;         
    }
    #nav ul li{
        width:10px;
        height:10px;
        background:gainsboro;
        border-radius:50%;
        cursor: pointer;
        float:left;
        list-style: none;
        margin-right:6px;
    }
    #box #nav ul li.active{
        background-color:#8B0000;
    }
</style>
           

html代碼：

<div id="box">  
        <div class="pic">
            <img src="imgs/1.jpg" style="display: block;"/>
            <img src="imgs/2.jpg"/>
            <img src="imgs/3.jpg"/>
            <img src="imgs/4.jpg"/>
            <img src="imgs/5.jpg"/>     
        </div>
        <div id="nav">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>          
        <div id="left"><</div>
        <div id="right">></div> 
    </div>
           

jq代碼：

<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            var index = 0;
            $('#box #nav ul li').hover(function(){
                index = $(this).index();
                console.log(index)
                $(this).addClass('active').siblings().removeClass('active');
                $('div.pic img').eq(index).show().siblings().hide();
            },function(){});    


            $('#left').click(function(){
                auto();             
            });
            $('#right').click(function(){
                auto();
            })

            //設定定時器    放上去讓它停止。
            var play = setInterval(auto,2000);

            $('div.pic img').mouseenter(function(){
                clearInterval(play);
            }).mouseleave(function(){
                play = setInterval(auto,2000);
            });


            function auto(){
                index ++;                   
                if(index >= 5){    //這裡也可以是index%= 6;
                    index = 0;
                }                   
                $('#box #nav ul li').eq(index).addClass('active').siblings().removeClass('active');
                $('div.pic img').eq(index).show().siblings().hide();
            };
        });

    </script>