jQuery图片切换动画效果

////// 
// 2017-2-27 // 
////// 
$(function(){ 
 var num = 0; 
 var divStr = '#imageShowSmallAnchor'; // 移动 div 
 var s  = 300; 
 $('.imgNum').click(function(){ 
  var _this  = $(this); 
  var status = _this.attr('data-status'); 
  var total_num = _this.parent().find('ul li').length; 
  var numSPic = 4;//最多显示的小图的个数 
  var src; 
   
   
  if(status == 'left'){ 
   if(num <= 0){ 
    num = total_num-1; 
   }else{ 
    num--; 
   } 
  }else{ 
   if(num >= total_num-1){ 
    num = 0; 
   }else{ 
    num++; 
   } 
  } 
  // 4 一次做多显示四张小图 $("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画 
  // 第一种情况 当小图数量小于5时， 直接进行右移。 
  if (total_num <= numSPic) {$(divStr).stop(true,false).animate( 
   {left:num*106+39+"px"},s); 
  } else{ 
   //////// 
   // 图片左移 // 
   //////// 
   if (status == 'left') { 
    if (num = total_num - numSPic; x--) { 
       _this.parent().find('ul li').eq(x).show(); 
      } 
     } 
    } 
   } else{ 
    //////// 
    // 图片右移 // 
    //////// 
    if (num >= numSPic) { 
     _this.parent().find('ul li').eq(num-numSPic).hide(); 
    } else{ 
     // 特殊情況 右移时，从最后一张图切换到第一张图时 
     // 判断 是否是第一张图， 如果不是则再变成左移时，无需刷新小图的显示状态 
     if (num == 0) { 
      for (var x = 0; x = 357) { 
     $(divStr).stop().animate({left:"357px"}); 
     // 当从最后一张切换到第一张时，样式应在最左边。 
     if (num==0) { 
      $(divStr).stop().animate({left:"39px"},s); 
     } 
    } else{ 
     $(divStr).stop().animate({left:"+=106px"},s); 
    } 
   } 
  } 
  src = _this.parent().find('ul li').eq(num).find('img').attr('src'); 
  _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); 
 }); 
  
 // 点击小图切换 大图 和小图上的样式。 
 $('.imgSW-bt li').click(function(){ 
  var _this = $(this); 
  var src; 
  num = _this.index(); 
  // parseInt(10/3); 整除 
  // 获取点击的位置，来计算 样式的位置。 
  var X = parseInt(_this.position().left/106); 
 
  $(divStr).stop().animate({left:X*106+39+"px"},s); 
  src = _this.find('img').attr('src'); 
  _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); 
 }); 
}); 

 
  
 
   
 
    
 
   
 
  
 
  
 
  
 
    
   
 
   
 
    
 
     
户型1
 
    
 
     
    
 
     
户型2
 
    
 
    
 
     
户型3
 
    
 
    
 
     
户型4
 
    
 
    
 
     
户型5
 
    
 
    
 
     
户型6
 
    
 
    
 
     
户型7
 
    
 
    
 
     
户型8
 
    
 
   
 
    
  
 
 
 

$("#div").stop();//停止当前动画，继续下一个动画 
$("#div").stop(true);//清除元素的所有动画  
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态