使用jQuery实现图片轮播的方法

图片轮播一直是一个老生常谈的话题，而且在PC端、移动端中使用的非常之多。
现提供一种用jQuery来实现的简单方法

一言不合就上代码：
结构部分：

  <div id="pic">
    <div id="picTop" class="clear"><h3>图片组</h3><p><span id="left">&lt;</span> <span id="right">&gt;</span></p></div>
    <ul> <!--这个地方也可以使用js生成-->
      <li><img src="images/index_class1.gif"></li>
      <li><img src="images/index_class2.gif"></li>
      <li><img src="images/index_class3.gif"></li>
      <li><img src="images/index_class4.gif"></li>
      <li><img src="images/index_class5.gif"></li>
      <li><img src="images/index_class6.gif"></li>
      <li><img src="images/index_class7.jpg"></li>
      <li><img src="images/index_class8.jpg"></li>
      <li><img src="images/index_class9.jpg"></li>
      <li><img src="images/index_class10.jpg"></li>
    </ul>
  </div>

表现部分：

/* 格式化 */
ul,li,p,h3,img { padding:0; margin:0; }
.clear { *zoom: 1; }
.clear:after { content: ''; display: table; clear: both; }
/* 具体内容 */
#pic { position: relative; width: 920px; height: 200px;  margin:0 auto; overflow: hidden; }
ul { position: absolute; height: 200px; width: 1500px; } /*使用固定定位，改变left的值实现图片滚动的效果*/
#pic ul li { float: left; margin-right:28px; width: 130px; height: 100px; overflow: hidden; }

/* 标题和左右按钮的样式 */
#picTop {  background: #fff; margin-bottom: 10px; }
#picTop h3 { float: left; margin-left:20px; line-height: 40px; border-bottom: 2px solid #333; }
#picTop p { float: right; line-height: 40px; margin-right: 20px; }
#picTop p span { display: inline-block; width: 30px; cursor: pointer; text-align: center; vertical-align: middle; }

动作部分：

$(function(){

    var page = 1; //初始化页码
    var v_width = 158; //定义每张图片的宽度
    var len = $("#pic ul li").length; 

    $("#pic ul").width(v_width*len); //计算 UL的宽度

    $("#right").click(function(){

        var page_count = Math.ceil(len/1); //计算当前页码
        var show = $("#pic ul");

        if(!show.is(":animated")){ //在滚动动画执行时，按钮停止响应
            if(page == page_count-5 ){ //设置图片滚动的右边最大位置
                show.animate({left:'0px'},"slow"); //图片滚动的动画
                page = 1;
            }else{
                show.animate({left:"-="+v_width},"slow");
                page++;
            }
        }
    });
    $("#left").click(function(){ //向左的按钮，算法和向右基本一致
        var page_count = Math.ceil(len/1);
        var show = $("#pic ul");
        if(!show.is(":animated")){
            if(page == 1 ){
                show.animate({left:'-='+v_width*(page_count-6)},"slow");
                page = page_count-5;
            }else{
                show.animate({left:"+="+v_width},"slow");
                page--;
            }
        }
    });
})