图片点击循环

HTML

<div class="divContainer">
    <div class="imgContainer">
        <ul class="imgContent clear">
            <li>
                <img src="image/1.jpg" alt="">
            </li>
            <li>
                <img src="image/2.jpg" alt="">
            </li>
            <li>
                <img src="image/3.jpg" alt="">
            </li>
            <li>
                <img src="image/4.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="turnLeft"><</div>
    <div class="turnRight">></div>
</div>

JS

$(document).ready(function () {
        var ul = $(".imgContent"),
            li = $(".imgContent li"),
            length = li.length,
            width = li.width(),
        //初始化number
            number = 1,
            speed = 800,
        //显示几张图片
            showNumber = 1;
        ul.css("width",(length+2)*width);
        ul.css("left",-width*number);
        li.first().clone().appendTo(ul);
        li.last().clone().prependTo(ul);
        $(".turnLeft").click(function () {
            number--;
            if(number<0){
                number = length;  //重置
            }
            ul.animate({
                left : -width*number
            },speed,function () {
                if(number<=0){
                    number = length;//重置
                    ul.css("left",-width*number);
                }
            })
        });
        $(".turnRight").click(function () {
            number++;
            ul.animate({
                left : -width*number
            },speed,function () {
                if(number > length+1-showNumber){
                    number = 1;//重置
                    ul.css("left",-width*number);
                }
            })
        })
    })

CSS

body{
            font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
            color:#000304;
            margin:0;
            background-color: #ffffff;
            min-width: 1350px;
        }
        p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
            margin:0;
            padding:0;
            list-style:none;
        }
        img{
            vertical-align:middle;
            border: none;
        }
        .lf{float:left;}
        .rt{float:right;}
        .clear:after{
            content: ' ';
            display: table;
            clear: both;
        }
        .clear{
            clear: both;
        }
        .divContainer{
            width: 500px;
            height: 300px;
            position: relative;
            margin: 0 auto;
        }
        .imgContainer{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            overflow: hidden;
        }
        .imgContent{
            height: 300px;
            position: relative;
        }
        .imgContent li{
            float: left;
            width: 500px;
            height: 300px;
        }
        .imgContent li img{
            width: 500px;
            height: 300px;
        }
        .turnLeft,.turnRight{
            font-size: 60px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        .turnLeft{
            position: absolute;
            top: 0;
            bottom: 0;
            left: -70px;
            margin: auto;
        }
        .turnRight{
            position: absolute;
            top: 0;
            bottom: 0;
            right: -70px;
            margin: auto;
        }