jtfc.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. $(function(){
  2. //判断1个到五个,个数不同定位不同;最终5个或者五个以上定位统一;
  3. var sum_li=$(".show_s_ui>li").length;//轮播图的数量
  4. $(".show_s_ui>li:nth-child(1)").attr("id","middel_shows");
  5. $(".show_s_ui>li:nth-child(2)").attr("id","right_shows");
  6. if(sum_li<=3){
  7. $(".show_s_ui>li:nth-child(3)").attr("id","left_shows");
  8. }else if(sum_li>=4){
  9. $(".show_s_ui>li:nth-child(3)").attr("id","small_right");
  10. }
  11. if(sum_li==4){
  12. $(".show_s_ui>li:last-child").attr("id","left_shows");
  13. }
  14. if(sum_li>=5){
  15. $(".show_s_ui>li:nth-last-child(2)").attr("id","small_left");
  16. }
  17. if(sum_li>=5){
  18. $(".show_s_ui>li:last-child").attr("id","left_shows");
  19. }
  20. //判断是否换行,如果换行则向前对其;此功能(使用弹性布局)不支持ie9及一下,ie9以下采用流式布局
  21. var mg_top=parseFloat($(".nav_banners>li").css("margin-top"));
  22. var mg_bottom=parseFloat($(".nav_banners>li").css("margin-bottom"));
  23. var li_padd_t=parseFloat($(".nav_banners>li").css("padding-top"));
  24. var li_padd_b=parseFloat($(".nav_banners>li").css("padding-bottom"));
  25. var li_heights=parseFloat($(".nav_banners>li").height());
  26. var sum_ul_height=mg_top+mg_bottom+li_padd_t+li_padd_b+li_heights+10;
  27. var ul_heights=$(".nav_banners").height();
  28. if(ul_heights>sum_ul_height){
  29. $(".pre_banner_3d").height($(".contrves").height()+$(".banner_tree").height());
  30. $(".nav_banners").css("-webkit-box-pack","start").css("-ms-flex-pack","start").css("justify-content","flex-start");
  31. }
  32. var middel_width=$("#middel_shows").width();//中间显示得宽
  33. var middel_hright=$("#middel_shows").height();//中间显示得高
  34. var slet_width=$("#right_shows").width();//两边显示得宽
  35. var slet_height=$("#right_shows").height();//两边显示得高
  36. var cster_width=$("#small_right").width();//最外层宽度
  37. var cster_height=$("#small_right").height();//最外层高度
  38. var pos_left_1=$("#middel_shows").css("left");//中间left偏移量
  39. var pos_left_2=$("#right_shows").css("left");//右边left偏移量
  40. var pos_left_3=$("#small_right").css("left");//最右边left偏移量
  41. var pos_left_4=$("#left_shows").css("left");//左边left偏移量
  42. var pos_left_5=$("#small_left").css("left");//最左边left偏移量
  43. var counts=1,lerts,rierts,fourts,five;
  44. //如果轮播项目大于5时对用的项目的下表的变量;
  45. if(sum_li>=5){
  46. lerts=counts+1;
  47. rierts=sum_li-2;
  48. fourts=sum_li-1;
  49. five=sum_li;
  50. }
  51. //====================================================
  52. var secend=150;//动画延迟时间
  53. if($(window).width()<521){secend=300}
  54. var scentimer=4000;//定时器间隔时间
  55. var timers=setInterval(auto_play_tree,scentimer);
  56. var ares=counts+1,ares2=counts;
  57. if(sum_li==4){ares=counts+2}
  58. if(sum_li>=5){ares=sum_li-1}
  59. //====================================================
  60. function dis_bloc(){
  61. $($(".show_s_ui>li")[counts]).css("display","block");
  62. $($(".show_s_ui>li")[lerts]).css("display","block");
  63. $($(".show_s_ui>li")[rierts]).css("display","block");
  64. $($(".show_s_ui>li")[fourts]).css("display","block");
  65. $($(".show_s_ui>li")[five]).css("display","block");
  66. }
  67. //左点击控件开始=========================================
  68. function left_btn(){
  69. $(this).off("click");
  70. if(sum_li==2){
  71. ares=counts;
  72. if(counts>=2){counts=0;}else if(counts<0){counts=sum_li-1}
  73. lerts=counts+1;
  74. if(lerts>=2){lerts=lerts-sum_li;}else if(lerts<0){lerts=sum_li-1}
  75. animating(counts,middel_width,middel_hright,pos_left_1,"1");//1
  76. animating(lerts,slet_width,slet_height,pos_left_2,"0.6");//0
  77. }
  78. if(sum_li==3){
  79. if(counts<0){counts=sum_li-1;}else if(counts>=sum_li){counts=0;}
  80. lerts=counts+1;
  81. rierts=counts+2;
  82. if(lerts>=3){lerts=lerts-sum_li;}
  83. if(rierts>=3){rierts=rierts-sum_li;} animating(counts,slet_width,slet_height,pos_left_4,"0.6");//1
  84. animating(lerts,middel_width,middel_hright,pos_left_1,"1");//2
  85. animating(rierts,slet_width,slet_height,pos_left_2,"0.6");//0
  86. }
  87. if(sum_li==4){
  88. if(counts<0){counts=sum_li-1;}else if(counts>=sum_li){counts=0}
  89. lerts=counts+1;
  90. rierts=counts+2;
  91. fourts=counts+3;
  92. if(lerts>=4){lerts=lerts-sum_li;}
  93. if(rierts>=4){rierts=rierts-sum_li;}
  94. if(fourts>=4){fourts=fourts-sum_li;}
  95. animating(counts,slet_width,slet_height,pos_left_3,"0");//1
  96. animating(lerts,slet_width,slet_height,pos_left_4,"0.6");//2
  97. animating(rierts,middel_width,middel_hright,pos_left_1,"1");//3
  98. animating(fourts,slet_width,slet_height,pos_left_2,"0.6");//0
  99. }
  100. if(sum_li>=5){
  101. if(counts>=sum_li){counts=0;}else if(counts<0){counts=sum_li-1;}
  102. if(lerts>=sum_li){lerts=0;}else if(lerts<0){lerts=sum_li-1;}
  103. if(rierts>=sum_li){rierts=0;}else if(rierts<0){rierts=sum_li-1;}
  104. if(fourts>=sum_li){fourts=0;}else if(fourts<0){fourts=sum_li-1;}
  105. if(five>=sum_li){five=0;}else if(five<0){five=sum_li-1;}
  106. dis_bloc()
  107. animating(counts,cster_width,cster_height,pos_left_3,"0");//1
  108. animating(lerts,cster_width,cster_height,pos_left_5,"0");//2
  109. animating(rierts,slet_width,slet_height,pos_left_4,"0.6");//倒数第二个
  110. animating(fourts,middel_width,middel_hright,pos_left_1,"1");//倒数第一个
  111. animating(five,slet_width,slet_height,pos_left_2,"0.6");//0
  112. lerts--;
  113. rierts--;
  114. fourts--;
  115. five--;
  116. }
  117. if(ares>=sum_li){ares=0}else if(ares<0){ares=sum_li-1}
  118. $($(".nav_banners>li")[ares]).addClass("blue_nav").siblings().removeClass("blue_nav");
  119. counts--;
  120. ares--;
  121. ares2--;
  122. if(ares2>=sum_li){ares2=0}else if(ares2<0){ares2=sum_li-1}
  123. setTimeout(function(){
  124. $(".left_btn").on("click",left_btn);
  125. },secend);
  126. }
  127. $(".left_btn").on("click",left_btn);
  128. //左点击控件结束=========================================
  129. //右点击控件开始==========================================
  130. function right_btn(){
  131. $(this).off("click");
  132. auto_play_tree();
  133. setTimeout(function(){
  134. $(".right_btn").on("click",right_btn);
  135. },secend);
  136. }
  137. $(".right_btn").on("click",right_btn);
  138. //右点击空间结束=======================================
  139. $(".color_font").mouseenter(function(){
  140. //鼠标移入控件清除定时器
  141. clearInterval(timers);
  142. }).mouseleave(function(){
  143. //鼠标移出控件启动定时器
  144. timers=setInterval(auto_play_tree,scentimer);
  145. });
  146. //动画函数开始========================================
  147. function animating(number,width,height,lefts,opacitting){
  148. $($(".show_s_ui>li")[number]).animate({
  149. width:width+"px",
  150. height:height+"px",
  151. left:lefts,
  152. opacity:opacitting,
  153. },secend);
  154. }
  155. //动画函数结束=========================================
  156. //轮播导航条显示=======================================
  157. $(".nav_banners>li").click(function(){
  158. clearInterval(timers);
  159. counts=$(this).index();
  160. ares=counts-2;
  161. ares2=counts;
  162. // if(sum_li<5){
  163. // }
  164. if(sum_li>=5){
  165. $(".show_s_ui>li").css("display","none");
  166. lerts=counts+1;
  167. rierts=sum_li-2+counts;
  168. if(rierts<=sum_li){rierts-=1}else if(rierts>sum_li)(rierts=rierts-sum_li-1)
  169. fourts=sum_li-1+counts;
  170. if(fourts<=sum_li){fourts-=1}else if(fourts>sum_li)(fourts=fourts-sum_li-1)
  171. five=sum_li+counts;
  172. if(five<=sum_li){five-=1}else if(five>sum_li)(five=five-sum_li-1)
  173. }
  174. auto_play_tree();
  175. timers=setInterval(auto_play_tree,scentimer)
  176. })
  177. //轮播到航条结束=======================================
  178. //轮播函数开始=========================================
  179. function auto_play_tree(){
  180. if(sum_li==2){
  181. if(counts>=2){counts=0;}else if(counts<0){counts=sum_li-1}
  182. lerts=counts+1;
  183. if(lerts>=2){lerts=lerts-sum_li;}else if(lerts<0){lerts=sum_li-1}
  184. animating(counts,middel_width,middel_hright,pos_left_1,"1");//1
  185. animating(lerts,slet_width,slet_height,pos_left_2,"0.6");//0
  186. }
  187. if(sum_li==3){
  188. if(counts>=3){counts=0;}else if(counts<0){counts=sum_li-1;}
  189. lerts=counts+1;
  190. rierts=counts+2;
  191. if(lerts>=3){lerts=lerts-sum_li;}
  192. if(rierts>=3){rierts=rierts-sum_li;}
  193. animating(counts,middel_width,middel_hright,pos_left_1,"1");//1
  194. animating(lerts,slet_width,slet_height,pos_left_2,"0.6");//2
  195. animating(rierts,slet_width,slet_height,pos_left_4,"0.6");//0
  196. }
  197. if(sum_li==4){
  198. if(counts>=4){counts=0;}else if(counts<0){counts=sum_li-1;}
  199. lerts=counts+1;
  200. rierts=counts+2;
  201. fourts=counts+3;
  202. if(lerts>=4){lerts=lerts-sum_li;}
  203. if(rierts>=4){rierts=rierts-sum_li;}
  204. if(fourts>=4){fourts=fourts-sum_li;}
  205. animating(counts,middel_width,middel_hright,pos_left_1,"1");//1
  206. animating(lerts,slet_width,slet_height,pos_left_2,"0.6");//2
  207. animating(rierts,slet_width,slet_height,pos_left_3,"0");//3
  208. animating(fourts,slet_width,slet_height,pos_left_4,"0.6");//0
  209. }
  210. if(sum_li>=5){
  211. if(counts>=sum_li){counts=0;}else if(counts<0){counts=sum_li-1;}
  212. if(lerts>=sum_li){lerts=0;}else if(lerts<0){lerts=sum_li-1;}
  213. if(rierts>=sum_li){rierts=0;}else if(rierts<0){rierts=sum_li-1;}
  214. if(fourts>=sum_li){fourts=0;}else if(fourts<0){fourts=sum_li-1;}
  215. if(five>=sum_li){five=0;}else if(five<0){five=sum_li-1;}
  216. dis_bloc();
  217. animating(counts,middel_width,middel_hright,pos_left_1,"1");//1
  218. animating(lerts,slet_width,slet_height,pos_left_2,"0.6");//2
  219. animating(rierts,cster_width,cster_height,pos_left_3,"0");//倒数第二个
  220. animating(fourts,cster_width,cster_height,pos_left_5,"0");//倒数第一个
  221. animating(five,slet_width,slet_height,pos_left_4,"0.6");//0
  222. lerts++;
  223. rierts++;
  224. fourts++;
  225. five++;
  226. }
  227. if(ares2>=sum_li){ares2=0}else if(ares2<0){ares2=sum_li-1}
  228. $($(".nav_banners>li")[ares2]).addClass("blue_nav").siblings().removeClass("blue_nav");
  229. counts++;
  230. ares++;
  231. ares2++;
  232. if(ares>=sum_li){ares=0}else if(ares<0){ares=sum_li-1}
  233. }
  234. //轮播函数结束=========================================================
  235. //如果就一张则停止定时器;清除所有控件事件
  236. if(sum_li<2){
  237. clearInterval(timers);
  238. $(".nav_banners>li").off();
  239. $(".color_font").off();
  240. }
  241. //移入到轮播项目上停止定时器,隐藏介绍(div)显示,移出启动定时器;
  242. $(".show_s_ui>li").mouseenter(function(){
  243. clearInterval(timers);
  244. $(this).children("div").css("display","block");
  245. }).mouseleave(function(){
  246. $(this).children("div").css("display","none");
  247. timers=setInterval(auto_play_tree,scentimer);
  248. });
  249. });