index.js 4.9 KB

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