pic_tab.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. var jq = $.noConflict();
  2. //ban_qh
  3. jq.fn.banqh = function(can){
  4. can = jq.extend({
  5. box:null,//总框架
  6. pic:null,//大图框架
  7. pnum:null,//小图框架
  8. prev_btn:null,//小图左箭头
  9. next_btn:null,//小图右箭头
  10. prev:null,//大图左箭头
  11. next:null,//大图右箭头
  12. pop_prev:null,//弹出框左箭头
  13. pop_next:null,//弹出框右箭头
  14. autoplay:false,//是否自动播放
  15. interTime:5000,//图片自动切换间隔
  16. delayTime:800,//切换一张图片时间
  17. pop_delayTime:800,//弹出框切换一张图片时间
  18. order:0,//当前显示的图片(从0开始)
  19. picdire:true,//大图滚动方向(true水平方向滚动)
  20. mindire:true,//小图滚动方向(true水平方向滚动)
  21. min_picnum:null,//小图显示数量
  22. pop_up:false,//大图是否有弹出框
  23. pop_div:null,//弹出框框架
  24. pop_pic:null,//弹出框图片框架
  25. pop_xx:null,//关闭弹出框按钮
  26. mhc:null//朦灰层
  27. }, can || {});
  28. var picnum = jq(can.pic).find('ul li').length;
  29. var picw = jq(can.pic).find('ul li').outerWidth(true);
  30. var pich = jq(can.pic).find('ul li').outerHeight(true);
  31. var poppicw = jq(can.pop_pic).find('ul li').outerWidth(true);
  32. var picminnum = jq(can.pnum).find('ul li').length;
  33. var picpopnum = jq(can.pop_pic).find('ul li').length;
  34. var picminw = jq(can.pnum).find('ul li').outerWidth(true);
  35. var picminh = jq(can.pnum).find('ul li').outerHeight(true);
  36. var pictime;
  37. var tpqhnum=0;
  38. var xtqhnum=0;
  39. var popnum=0;
  40. jq(can.pic).find('ul').width(picnum*picw).height(picnum*pich);
  41. jq(can.pnum).find('ul').width(picminnum*picminw).height(picminnum*picminh);
  42. jq(can.pop_pic).find('ul').width(picpopnum*poppicw);
  43. //点击小图切换大图
  44. jq(can.pnum).find('li').click(function () {
  45. tpqhnum = xtqhnum = jq(can.pnum).find('li').index(this);
  46. show(tpqhnum);
  47. minshow(xtqhnum);
  48. }).eq(can.order).trigger("click");
  49. //大图弹出框
  50. if(can.pop_up==true){
  51. jq(can.pic).find('ul li').click(function(){
  52. jq(can.mhc).height(jq(document).height()).show();
  53. jq(can.pop_div).show();
  54. popnum = jq(this).index();
  55. var gdjl_w=-popnum*poppicw;
  56. jq(can.pop_pic).find('ul').css('left',gdjl_w);
  57. popshow(popnum);
  58. })
  59. jq(can.pop_xx).click(function(){
  60. jq(can.mhc).hide();
  61. jq(can.pop_div).hide();
  62. })
  63. }
  64. if(can.autoplay==true){
  65. //自动播放
  66. pictime = setInterval(function(){
  67. show(tpqhnum);
  68. minshow(tpqhnum)
  69. tpqhnum++;
  70. xtqhnum++;
  71. if(tpqhnum==picnum){tpqhnum=0};
  72. if(xtqhnum==picminnum){xtqhnum=0};
  73. },can.interTime);
  74. //鼠标经过停止播放
  75. jq(can.box).hover(function(){
  76. clearInterval(pictime);
  77. },function(){
  78. pictime = setInterval(function(){
  79. show(tpqhnum);
  80. minshow(tpqhnum)
  81. tpqhnum++;
  82. xtqhnum++;
  83. if(tpqhnum==picnum){tpqhnum=0};
  84. if(xtqhnum==picminnum){xtqhnum=0};
  85. },can.interTime);
  86. });
  87. }
  88. //小图左右切换
  89. jq(can.prev_btn).click(function(){
  90. if(tpqhnum==0){tpqhnum=picnum};
  91. if(xtqhnum==0){xtqhnum=picnum};
  92. xtqhnum--;
  93. tpqhnum--;
  94. show(tpqhnum);
  95. minshow(xtqhnum);
  96. })
  97. jq(can.next_btn).click(function(){
  98. if(tpqhnum==picnum-1){tpqhnum=-1};
  99. if(xtqhnum==picminnum-1){xtqhnum=-1};
  100. xtqhnum++;
  101. minshow(xtqhnum)
  102. tpqhnum++;
  103. show(tpqhnum);
  104. })
  105. //大图左右切换
  106. jq(can.prev).click(function(){
  107. if(tpqhnum==0){tpqhnum=picnum};
  108. if(xtqhnum==0){xtqhnum=picnum};
  109. xtqhnum--;
  110. tpqhnum--;
  111. show(tpqhnum);
  112. minshow(xtqhnum);
  113. })
  114. jq(can.next).click(function(){
  115. if(tpqhnum==picnum-1){tpqhnum=-1};
  116. if(xtqhnum==picminnum-1){xtqhnum=-1};
  117. xtqhnum++;
  118. minshow(xtqhnum)
  119. tpqhnum++;
  120. show(tpqhnum);
  121. })
  122. //弹出框图片左右切换
  123. jq(can.pop_prev).click(function(){
  124. if(popnum==0){popnum=picnum};
  125. popnum--;
  126. popshow(popnum);
  127. })
  128. jq(can.pop_next).click(function(){
  129. if(popnum==picnum-1){popnum=-1};
  130. popnum++;
  131. popshow(popnum);
  132. })
  133. //小图切换过程
  134. function minshow(xtqhnum){
  135. var mingdjl_num =xtqhnum-can.min_picnum+2
  136. var mingdjl_w=-mingdjl_num*picminw;
  137. var mingdjl_h=-mingdjl_num*picminh;
  138. if(can.mindire==true){
  139. jq(can.pnum).find('ul li').css('float','left');
  140. if(picminnum>can.min_picnum){
  141. if(xtqhnum<3){mingdjl_w=0;}
  142. if(xtqhnum==picminnum-1){mingdjl_w=-(mingdjl_num-1)*picminw;}
  143. jq(can.pnum).find('ul').stop().animate({'left':mingdjl_w},can.delayTime);
  144. }
  145. }else{
  146. jq(can.pnum).find('ul li').css('float','none');
  147. if(picminnum>can.min_picnum){
  148. if(xtqhnum<3){mingdjl_h=0;}
  149. if(xtqhnum==picminnum-1){mingdjl_h=-(mingdjl_num-1)*picminh;}
  150. jq(can.pnum).find('ul').stop().animate({'top':mingdjl_h},can.delayTime);
  151. }
  152. }
  153. }
  154. //大图切换过程
  155. function show(tpqhnum){
  156. var gdjl_w=-tpqhnum*picw;
  157. var gdjl_h=-tpqhnum*pich;
  158. if(can.picdire==true){
  159. jq(can.pic).find('ul li').css('float','left');
  160. jq(can.pic).find('ul').stop().animate({'left':gdjl_w},can.delayTime);
  161. }else{
  162. jq(can.pic).find('ul').stop().animate({'top':gdjl_h},can.delayTime);
  163. }//滚动
  164. //jq(can.pic).find('ul li').eq(tpqhnum).fadeIn(can.delayTime).siblings('li').fadeOut(can.delayTime);//淡入淡出
  165. jq(can.pnum).find('li').eq(tpqhnum).addClass("on").siblings(this).removeClass("on");
  166. };
  167. //弹出框图片切换过程
  168. function popshow(popnum){
  169. var gdjl_w=-popnum*poppicw;
  170. jq(can.pop_pic).find('ul').stop().animate({'left':gdjl_w},can.pop_delayTime);
  171. //jq(can.pop_pic).find('ul li').eq(tpqhnum).fadeIn(can.pop_delayTime).siblings('li').fadeOut(can.pop_delayTime);//淡入淡出
  172. };
  173. }