轮播图实现

<style type="text/css">
    *{margin:0;padding: 0;}
    li{list-style: none;}
    .div1 ul li{
            float:left;
        }
    .div1 {
        overflow: hidden;
        width: 480px;
        height: 300px;
        border: 3px solid red;
        position: relative;    
    }
    .div1 ul{
        position: absolute;
        left: 0;
        top: 0;
        width: 3500px;
    } 
    .div1 ol{
        position: absolute;
        bottom: 5px;
        left: 200px;
    }
    .div1 ol li {
        float: left;
        text-align: center;
        width: 20px;
        height: 30px;
        line-height: 30px;
         
        /*OL的大小 padding*/
        padding:0 5px;
         margin-left: 5px;
        border: solid 1px #ccc;
    }
    .olone {
        background: ;
        color: #0ee;
    }
</style>
    <center>
    <div class="div1">
        <ul>
            <li><img src="1.jpg" alt='11' width="480" height="300" /></li>
            <li><img src="2.jpg" alt='22' width="480" height="300"  /></li>
            <li><img src="3.jpg" alt='33' width="480" height="300" /></li>
            <li><img src="4.jpg" alt='44' width="480" height="300"  /></li>
            <li><img src="5.jpg" alt='55' width="480" height="300"  /></li>
            <li><img src="6.jpg" alt='55' width="480" height="300"  /></li>
            <li><img src="7.jpg" alt='55' width="480" height="300"  /></li>
        </ul>
        <ol>
            <li class="olone">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ol>
 
    </div>
</center>
<script src="./php6/ci.jquery/public/jquery.js"></script>
<script>
$(function(){
 
        //定义计数器 图片下标定义为n
        var n=0;
        var dd=$('.div1 ol li');
        dd.click(function(){
              var index=$(this).index();
            $(this).addClass('olone').siblings().removeClass();
            $('.div1 ul ').animate({
                'left':'-'+index*480+'px'
            },200);
        });
    function ssllee(){
            if(n==6){
                n=0;
            }else{
                n++;
            }
            dd.eq(n).addClass('olone').siblings().removeClass();
            $('.div1 ul ').animate({
                'left':'-'+n*480+'px'
            },200);
    }
    //定时器
    var timer=setInterval(ssllee,1500);
    //鼠标悬停 
           $('.div1').hover(function(){
             clearInterval(timer);
           },function(){
             timer=setInterval(ssllee,1500);
           });        
    })
 
</script>