图片轮番

html结构：

<div class="wrap">
        <ul class="banner">
            <li class="active">
                <a href="#"><img src="./imgs/banner1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/banner2.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/banner3.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/banner4.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./imgs/banner5.jpg"></a>
            </li>
        </ul>
        <ul class="yuandian">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="left"></div>
        <div class="right"></div>
    </div>

　　css样式：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<style type="text/css">
    body,ul,li,div{
        margin:0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .wrap{
        position: relative;
        width: 500px;
        height: auto;
        margin:10px auto;
        overflow: hidden;
    }
    .banner{
        width: 2500px;
        height: auto;
    }
    .banner>li{
        display: none;
        width: 500px;
        height: auto;
        float: left;
        text-align: center;
    }
    .banner>li.active{
        display: block;
    }
    .banner>li>a{
        display: inline-block;
        width: 500px;
        height: auto;
    }
    .banner>li>a>img{
        display: block;
        width: 500px;
        height: auto;
    }
    .banner,.yuandian:after{
        content: '';
        display: block;
        clear: both;
    }
    .yuandian{
        position: absolute;
        left: 50%;
        bottom: 10px;
        margin-left: -45px;
    }
    .yuandian>li{
        float: left;
        margin-right: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
    }
    .yuandian>li:hover{
        cursor: pointer;
    }
    .yuandian>li.active{
        background-color: orange;
         
    }
    /*.yuandian>li>span{
        /*display: inline-block;*/
    /*  width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
    }*/
    .left{
        position: absolute;
        background-color:#967F7F;
        width: 40px;
        height: 50px;
        top:50%;
        margin-top: -25px;
        left: 0;
    }
    .left:hover{
        background-color: #C5B2B2;
        cursor: pointer;
    }
    .left:before{
        display: block;
        text-align: center;
        content: '<';
        line-height: 50px;
        font-size: 40px;
        font-weight: bold;
    }
    .right{
        position: absolute;
        background-color: #967F7F;
        width: 40px;
        height: 50px;
        top:50%;
        margin-top: -25px;
        right: 0;
    }
    .right:hover{
        background-color: #C5B2B2;
        cursor: pointer;
    }
    .right:before{
        display: block;
        text-align: center;
        content: '>';
        line-height: 50px;
        font-size: 40px;
        font-weight: bold;
    }
    </style>

　　javascript:

<script type="text/javascript" src="./jquery.1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var
                banner_li=$('.banner>li'),
                yuandian_li=$('.yuandian>li'),
                left=$('.left'),
                right=$('.right'),
                indexbanner=0;
            yuandian_li.click(function(){
                var index=yuandian_li.index(this);
                yuandian_li.removeClass('active').eq(index).addClass('active');
                banner_li.removeClass('active').eq(index).addClass('active');
                banner_li.hide().eq(index).fadeIn('slow');
            });
            left.click(function(){
                if(--indexbanner<0){
                    indexbanner=4;
                }
                yuandian_li.eq(indexbanner).click();
            });
            right.click(function(){
                if(++indexbanner>4){
                    indexbanner=0;
                }
                yuandian_li.eq(indexbanner).click();
            });
    });
    </script>