jQuery制作简洁的图片轮播效果

$(document).ready(function(){
  var $iBox = $(".imgBox"),
    $iNum = $(".imgNum"), //缓存优化
    indexImg = 1,     //初始下标
    totalImg = 4,     //图片总数目
    imgSize = 300,     //图片尺码 宽度
    moveTime = 1100,    //切换动画时光
    setTime = 2500,    //中间暂停时光
    clc = null;
 
  function moveImg(){
    if(indexImg != totalImg){
      $iBox.animate({
        left: -(indexImg*imgSize) + "px"
      }, moveTime);
      $iNum.removeClass("mark-color")
        .eq(indexImg)
        .addClass("mark-color");
      indexImg++;
    }
    else{
      indexImg = 1;
      $iNum.removeClass("mark-color")
        .eq(indexImg - 1)
        .addClass("mark-color");
      $iBox.animate({
        left: 0
      }, moveTime);
    }
  }
  $iNum.hover(function(){
    $iBox.stop();          //停止当前动画
    clearInterval(clc);       //暂停重复
    $iNum.removeClass("mark-color");
    $(this).addClass("mark-color");
    indexImg = $(this).index();
    $iBox.animate({
      left: -(indexImg*imgSize) + "px"
    }, 500);
  },function(){
    clc = setInterval(moveImg, setTime);
  });
 
  clc = setInterval(moveImg, setTime);
});
$(document).r