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