index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import '../css/bootstrap.less';
  2. import 'bootstrap/dist/js/bootstrap.js';
  3. import '../css/public.css';
  4. import '../css/index_home.css';
  5. import '../css/indexNew.css';
  6. import './public.js';
  7. import './jquery-2.1.0.js';
  8. (function(){
  9. //搜索框上面栏目的选择
  10. $(".indexSeach_one>ul>li").click(function(){
  11. $(this).parent().children().removeClass("indexActive");
  12. $(this).addClass("indexActive");
  13. })
  14. //搜索功能
  15. $(".indexImg1").click(function(){
  16. var seachon=$(".indexSeach_one>ul>li.indexActive").index();
  17. var key=$("#int").val();
  18. localStorage.setItem("indexKeyWord",key);
  19. switch(seachon){
  20. case 0:window.open(globalConfig.context + '/portal/technologyTrading/achievement.html');break;
  21. case 1:window.open(globalConfig.context + '/portal/technologyTrading/demand.html');break;
  22. case 2:window.open(globalConfig.context + '/portal/technologyTrading/achievement.html');break;
  23. case 3:window.open(globalConfig.context + '/portal/thinkTank/policyList.html');break;
  24. case 4:window.open(globalConfig.context + '/portal/thinkTank/index.html#zizone');break;
  25. case 5:break;
  26. }
  27. })
  28. //申请会员
  29. $(".indexImg2").click(function(){
  30. $(".ret_top>li:nth-child(1)").click();
  31. })
  32. //搜索栏下面的点击,登录判断
  33. $(".seachCont1>div:nth-child(4)>a").click(function(){
  34. var islogin=$("#isLogin").attr("islogin");
  35. if(islogin=="true"){
  36. $(".head_login").click();
  37. }else if(islogin=="false"){
  38. $(this).attr("href","/user/account/demand.html#techDemand");
  39. $(this).click();
  40. }
  41. })
  42. $(".seachCont1>div:nth-child(5)>a").click(function(){
  43. var islogin=$("#isLogin").attr("islogin");
  44. if(islogin=="true"){
  45. $(".head_login").click();
  46. }else if(islogin=="false"){
  47. $(this).attr("href","/user/account/achievement.html#techAchievement");
  48. $(this).click();
  49. }
  50. })
  51. //搜索框下面的页面链接点击
  52. $(".seachMore").click(function(){
  53. if($(this).parent().children("#seachCont").children().attr("clicka")=="0"){
  54. $(this).parent().children("#seachCont").children().css("left","-138px").attr("clicka","1");
  55. }else if($(this).parent().children("#seachCont").children().attr("clicka")=="1"){
  56. $(this).parent().children("#seachCont").children().css("left","0px").attr("clicka","0");
  57. }
  58. })
  59. //成果需求切换
  60. $(".indexGroom_table>div").click(function(){
  61. $(this).parent().children().removeClass("indexGroom_active");
  62. $(this).addClass("indexGroom_active");
  63. console.log($(this).html());
  64. if($(this).html()=="成果"){
  65. $(".chengguo").css("display","block");
  66. $(".xuqiu").css("display","none");
  67. }else if($(this).html()=="需求"){
  68. $(".chengguo").css("display","none");
  69. $(".xuqiu").css("display","block");
  70. }
  71. })
  72. //轮播图的开始
  73. var img_length=$(".ct-img-big").children("li").length-2;
  74. var smallhtml="";
  75. for(var i=1;i<=img_length;i++){
  76. smallhtml+="<li></li>"
  77. }
  78. $(".ct-img-small").html(smallhtml);
  79. var ctwidth=$('.ct-img-small').width();
  80. $('.ct-img-small').css({marginLeft:-ctwidth/2});
  81. $(".ct-img-small").children().eq(0).addClass("active");
  82. var $imgBig=$('.ct-img-big'),
  83. $btnNext=$('.btn-next'),
  84. $btnPre=$('.btn-pre'),
  85. $CT = $('.carouselt'),
  86. $imgSmall=$('.ct-img-small');
  87. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  88. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  89. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  90. var $firstImg=$imgBig.find('li').first(),
  91. $lastImg=$imgBig.find('li').last();
  92. $imgBig.prepend($lastImg.clone());
  93. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  94. $imgBig.css("width", $imgWidth*$imgBig.children().length+"px")//这时的个数是添加完以后的个数
  95. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  96. var pageIndex = 0 ; //img的下标;
  97. var isAnimate = false//防止重复点击 上锁
  98. $btnNext.on('click',function(e){
  99. e.preventDefault();
  100. playNext();
  101. setTimeout(function(){
  102. },1500)
  103. });
  104. $btnPre.on('click',function(e){
  105. e.preventDefault();
  106. playPre();
  107. setTimeout(function(){
  108. },1500)
  109. });
  110. $imgSmall.find('li').on('click',function(){
  111. var smallIdx= $(this).index();
  112. if(smallIdx>pageIndex){
  113. playNext(smallIdx-pageIndex)
  114. }
  115. else if(smallIdx<pageIndex){
  116. playPre(pageIndex-smallIdx)
  117. }
  118. });
  119. function playNext(n){
  120. var idx = n ||1;
  121. if(isAnimate) return;
  122. isAnimate = true;
  123. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  124. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  125. pageIndex = pageIndex+idx;
  126. if( pageIndex ===$imgLength ){
  127. $imgBig.css({'left':'-'+$imgWidth+'px'})
  128. pageIndex = 0;
  129. }
  130. isAnimate = false;
  131. smallImg()
  132. })
  133. }
  134. function playPre(n){
  135. var idx = n ||1;
  136. if(isAnimate) return;
  137. isAnimate = true;
  138. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  139. pageIndex=pageIndex-idx;
  140. if(pageIndex<0){
  141. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  142. pageIndex = $imgLength-1;
  143. }
  144. isAnimate = false;
  145. smallImg()
  146. })
  147. }
  148. //设置小图的class
  149. function smallImg(){
  150. $imgSmall.children()
  151. .removeClass('active')
  152. .eq(pageIndex) .addClass('active')
  153. }
  154. //自动轮播 鼠标进入鼠标离开
  155. var timer =setInterval(function(){
  156. playNext()
  157. },3000);
  158. $CT.hover(function(){
  159. clearInterval(timer)
  160. },function(){
  161. timer =setInterval( function(){
  162. playNext()
  163. },3000)
  164. });
  165. })()