indexNew.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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. (function(){
  8. //搜索框上面栏目的选择
  9. $(".indexSeach_one>ul>li").click(function(){
  10. $(this).parent().children().removeClass("indexActive");
  11. $(this).addClass("indexActive");
  12. })
  13. //搜索功能
  14. //搜索框下面的页面链接点击
  15. $(".seachMore").click(function(){
  16. if($(this).parent().children("#seachCont").children().attr("clicka")=="0"){
  17. $(this).parent().children("#seachCont").children().css("left","-138px").attr("clicka","1");
  18. }else if($(this).parent().children("#seachCont").children().attr("clicka")=="1"){
  19. $(this).parent().children("#seachCont").children().css("left","0px").attr("clicka","0");
  20. }
  21. })
  22. //成果需求切换
  23. $(".indexGroom_table>div").click(function(){
  24. $(this).parent().children().removeClass("indexGroom_active");
  25. $(this).addClass("indexGroom_active");
  26. if($(this).html()=="成果"){
  27. $(".chengguo").css("display","block");
  28. $(".xuqiu").css("display","none");
  29. }else if($(this).html()=="需求"){
  30. $(".chengguo").css("display","none");
  31. $(".xuqiu").css("display","block");
  32. }
  33. })
  34. //轮播图的开始
  35. var img_length=$(".ct-img-big").children("li").length-2;
  36. var smallhtml="";
  37. for(var i=1;i<=img_length;i++){
  38. smallhtml+="<li></li>"
  39. }
  40. $(".ct-img-small").html(smallhtml);
  41. var ctwidth=$('.ct-img-small').width();
  42. $('.ct-img-small').css({marginLeft:-ctwidth/2});
  43. $(".ct-img-small").children().eq(0).addClass("active");
  44. var $imgBig=$('.ct-img-big'),
  45. $btnNext=$('.btn-next'),
  46. $btnPre=$('.btn-pre'),
  47. $CT = $('.carouselt'),
  48. $imgSmall=$('.ct-img-small');
  49. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  50. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  51. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  52. var $firstImg=$imgBig.find('li').first(),
  53. $lastImg=$imgBig.find('li').last();
  54. $imgBig.prepend($lastImg.clone());
  55. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  56. $imgBig.css("width", $imgWidth*$imgBig.children().length+"px")//这时的个数是添加完以后的个数
  57. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  58. var pageIndex = 0 ; //img的下标;
  59. var isAnimate = false//防止重复点击 上锁
  60. $btnNext.on('click',function(e){
  61. e.preventDefault();
  62. playNext();
  63. setTimeout(function(){
  64. },1500)
  65. });
  66. $btnPre.on('click',function(e){
  67. e.preventDefault();
  68. playPre();
  69. setTimeout(function(){
  70. },1500)
  71. });
  72. $imgSmall.find('li').on('click',function(){
  73. var smallIdx= $(this).index();
  74. if(smallIdx>pageIndex){
  75. playNext(smallIdx-pageIndex)
  76. }
  77. else if(smallIdx<pageIndex){
  78. playPre(pageIndex-smallIdx)
  79. }
  80. });
  81. function playNext(n){
  82. var idx = n ||1;
  83. if(isAnimate) return;
  84. isAnimate = true;
  85. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  86. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  87. pageIndex = pageIndex+idx;
  88. if( pageIndex ===$imgLength ){
  89. $imgBig.css({'left':'-'+$imgWidth+'px'})
  90. pageIndex = 0;
  91. }
  92. isAnimate = false;
  93. smallImg()
  94. })
  95. }
  96. function playPre(n){
  97. var idx = n ||1;
  98. if(isAnimate) return;
  99. isAnimate = true;
  100. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  101. pageIndex=pageIndex-idx;
  102. if(pageIndex<0){
  103. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  104. pageIndex = $imgLength-1;
  105. }
  106. isAnimate = false;
  107. smallImg()
  108. })
  109. }
  110. //设置小图的class
  111. function smallImg(){
  112. $imgSmall.children()
  113. .removeClass('active')
  114. .eq(pageIndex) .addClass('active')
  115. }
  116. //自动轮播 鼠标进入鼠标离开
  117. var timer =setInterval(function(){
  118. playNext()
  119. },3000);
  120. $CT.hover(function(){
  121. clearInterval(timer)
  122. },function(){
  123. timer =setInterval( function(){
  124. playNext()
  125. },3000)
  126. });
  127. })()