highTechCognizance.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import '../../css/bootstrap.less';
  2. import 'bootstrap/dist/js/bootstrap.js';
  3. import '../../css/public.css';
  4. import '../../css/main_banner.css';
  5. import '../../js/public.js';
  6. import '../../js/main_banner.js';
  7. import '../../css/service/highTechCognizance.css';
  8. (function(){
  9. var t=1;//判断现在在中间的是第几个div
  10. $(".pro_rotate>div>div").click(function(){
  11. t=$(this).attr("value")-(-1);
  12. $(".problem_left").children("div").eq(t).addClass("active_div").siblings().removeClass("active_div");
  13. $(this).parent().addClass("active").siblings().removeClass("active");
  14. var rotval=$(this).attr("value");
  15. var divval=$(".pro_rotate").attr("rota");
  16. var rotdiv=$(".pro_rotate>div");
  17. $(".pro_rotate").css({"transform":"rotate("+(divval-(-rotval*20))+"deg)"},500);
  18. for(var i=0;i<rotdiv.length;i++){
  19. var childrot=$(rotdiv[i]).children("div").attr("rota");
  20. $(rotdiv[i]).children("div").css({"transform":"rotate("+(childrot-(rotval*20))+"deg)"},500);
  21. }
  22. div_position();
  23. });
  24. var scrollFunc=function(e){
  25. if(e.target.id=="rotate_four"){
  26. e=e || window.event;
  27. if (e.stopPropagation) e.stopPropagation();
  28. else e.cancelBubble = true;
  29. if (e.preventDefault) e.preventDefault();
  30. else e.returnValue = false;
  31. var a=0;
  32. if(e.wheelDelta){//IE/Opera/Chrome
  33. a=e.wheelDelta/-120;
  34. }else if(e.detail){//Firefox
  35. a=e.detail/3;
  36. }
  37. t-=-a;
  38. if(t<0){
  39. t=0;
  40. }else if(t>3){
  41. t=3;
  42. }else{
  43. $(".pro_rotate>div>div").eq(t).click();
  44. }
  45. // $(".pro_rotate>div>div").eq(t).click();
  46. }
  47. }
  48. /*注册事件*/
  49. if(document.addEventListener){
  50. document.addEventListener('DOMMouseScroll',scrollFunc,false);
  51. }//W3C
  52. window.onmousewheel=document.getElementById("rotate_four").onmousewheel=scrollFunc;//IE/Opera/Chrome
  53. function div_position(){
  54. //var problem_textdiv=$(".problem_left>div");
  55. //for(j=0;j<problem_textdiv.length;j++){
  56. // var div_height=$(problem_textdiv[j]).height();
  57. // $(problem_textdiv[j]).css({"bottom":-div_height});
  58. //}
  59. //var act_divheight=$(".problem_left>div.active_div").height();
  60. //$(".problem_left>div.active_div").animate({"bottom":(450-act_divheight)/2},"slow");
  61. $(".problem_left>div").stop(false,true);
  62. $(".problem_left>div").fadeOut("fast");
  63. $(".problem_left>div.active_div").fadeIn("slow");
  64. }
  65. div_position();
  66. })();
  67. (function(){
  68. var htmlwidth=$(document).width();
  69. $(".btn_div>div").width((htmlwidth-1200)/2);
  70. $(".leftdiv").css({"left":-(htmlwidth-1200)/2});
  71. $(".rightdiv").css({"right":-(htmlwidth-1200)/2});
  72. var $imgBig=$('.ct_img_big'),
  73. $btnNext=$('.btn_next1'),
  74. $btnPre=$('.btn_pre1'),
  75. $CT = $('.carousel'),
  76. $imgSmall=$('.ct_img_small');
  77. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  78. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  79. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  80. var $firstImg=$imgBig.find('li'),
  81. $lastImg=$imgBig.find('li');
  82. $imgBig.prepend($lastImg.clone());
  83. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  84. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  85. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  86. var pageIndex = 0 ; //img的下标;
  87. var isAnimate = false//防止重复点击 上锁
  88. $btnNext.on('click',function(e){
  89. e.preventDefault();
  90. playNext();
  91. setTimeout(function(){
  92. },1500)
  93. });
  94. $btnPre.on('click',function(e){
  95. e.preventDefault()
  96. playPre();
  97. setTimeout(function(){
  98. },1500)
  99. });
  100. $imgSmall.find('li').on('click',function(){
  101. var smallIdx= $(this).index();
  102. if(smallIdx>pageIndex){
  103. playNext(smallIdx-pageIndex)
  104. }
  105. else if(smallIdx<pageIndex){
  106. playPre(pageIndex-smallIdx)
  107. }
  108. });
  109. function playNext(n){
  110. var idx = n ||1;
  111. if(isAnimate) return;
  112. isAnimate = true;
  113. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
  114. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  115. pageIndex = pageIndex+idx;
  116. if( pageIndex ===$imgLength ){
  117. $imgBig.css({'left':'-'+$imgWidth+'px'})
  118. pageIndex = 0;
  119. }
  120. isAnimate = false;
  121. smallImg()
  122. })
  123. }
  124. function playPre(n){
  125. var idx = n ||1;
  126. if(isAnimate) return;
  127. isAnimate = true;
  128. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
  129. pageIndex=pageIndex-idx;
  130. if(pageIndex<0){
  131. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  132. pageIndex = $imgLength-1;
  133. }
  134. isAnimate = false;
  135. smallImg()
  136. })
  137. }
  138. //设置小图的class
  139. function smallImg(){
  140. $imgSmall.children()
  141. .removeClass('active')
  142. .eq(pageIndex) .addClass('active')
  143. }
  144. })();