goodsCarousel

功能描述

自定义商品行数，用例见 demo_win.html。

效果图

goodsCarousel - 图1

依赖的模块

无

快速使用

js 调用

  1. linum = $('.mainlist li').length;//图片数量
  2.     w = linum/2 * 232;//ul宽度
  3.     $('.piclist').css('width', w + 'px');//ul宽度
  4.     $('.swaplist').html($('.mainlist').html());//复制内容
  6.     $('.og_next').click(function(){
  8.         if($('.swaplist,.mainlist').is(':animated')){
  9.             $('.swaplist,.mainlist').stop(true,true);
  10.         }
  12.         if($('.mainlist li').length>4){//多于4张图片
  13.             ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
  14.             sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
  15.             if(ml<=0 && ml>w*-1){//默认图片显示时
  16.                 $('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
  17.                 $('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动                
  18.                 if(ml==(w-928)*-1){//默认图片最后一屏时
  19.                     $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
  20.                 }
  21.             }else{//交换图片显示时
  22.                 $('.mainlist').css({left: '928px'})//默认图片放在显示区域右
  23.                 $('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
  24.                 if(sl==(w-928)*-1){//交换图片最后一屏时
  25.                     $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
  26.                 }
  27.             }
  28.         }
  29.     })
  30.     $('.og_prev').click(function(){
  32.         if($('.swaplist,.mainlist').is(':animated')){
  33.             $('.swaplist,.mainlist').stop(true,true);
  34.         }
  37.         if($('.mainlist li').length>4){//多于4张图片
  38.             ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
  39.             sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
  40.             if(ml<=0 && ml>w*-1){//默认图片显示时
  41.                 $('.swaplist').css({left: w * -1 + 'px'});
  42.                 $('.mainlist').animate({left: ml + 928 + 'px'},'slow');                
  43.                 if(ml==0){
  44.                     $('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
  45.                 }
  46.             }else{//交换图片显示时
  47.                 $('.swaplist').animate({left: sl + 928 + 'px'},'slow');
  48.                 $('.mainlist').css({left: (w - 928) * -1 + 'px',});
  49.                 if(sl==(w-928)*-1){//交换图片最后一屏时
  50.                     $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
  51.                 }
  52.             }
  54.         }
  55.     });
  57.     $('.goodlist').hover(function(){
  58.         $('.exchange',this).show();
  59.     },function(){
  60.         $('.exchange',this).hide();
  61.     });

特别说明

自定义商品行数样式修改，见用例 demo_win.html。