highTechCognizance.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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. }
  43. console.log(t);
  44. $(".pro_rotate>div>div").eq(t).click();
  45. }
  46. }
  47. /*注册事件*/
  48. if(document.addEventListener){
  49. document.addEventListener('DOMMouseScroll',scrollFunc,false);
  50. }//W3C
  51. window.onmousewheel=document.getElementById("rotate_four").onmousewheel=scrollFunc;//IE/Opera/Chrome
  52. function div_position(){
  53. //var problem_textdiv=$(".problem_left>div");
  54. //for(j=0;j<problem_textdiv.length;j++){
  55. // var div_height=$(problem_textdiv[j]).height();
  56. // $(problem_textdiv[j]).css({"bottom":-div_height});
  57. //}
  58. //var act_divheight=$(".problem_left>div.active_div").height();
  59. //$(".problem_left>div.active_div").animate({"bottom":(450-act_divheight)/2},"slow");
  60. $(".problem_left>div").stop(false,true);
  61. $(".problem_left>div").fadeOut("fast");
  62. $(".problem_left>div.active_div").fadeIn("slow");
  63. }
  64. div_position();
  65. })();
  66. (function(){
  67. var htmlwidth=$(document).width();
  68. $(".btn_div>div").width((htmlwidth-1200)/2);
  69. $(".leftdiv").css({"left":-(htmlwidth-1200)/2});
  70. $(".rightdiv").css({"right":-(htmlwidth-1200)/2});
  71. var $imgBig=$('.ct_img_big'),
  72. $btnNext=$('.btn_next1'),
  73. $btnPre=$('.btn_pre1'),
  74. $CT = $('.carousel'),
  75. $imgSmall=$('.ct_img_small');
  76. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  77. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  78. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  79. var $firstImg=$imgBig.find('li'),
  80. $lastImg=$imgBig.find('li');
  81. $imgBig.prepend($lastImg.clone());
  82. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  83. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  84. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  85. var pageIndex = 0 ; //img的下标;
  86. var isAnimate = false//防止重复点击 上锁
  87. $btnNext.on('click',function(e){
  88. e.preventDefault();
  89. playNext();
  90. setTimeout(function(){
  91. },1500)
  92. });
  93. $btnPre.on('click',function(e){
  94. e.preventDefault()
  95. playPre();
  96. setTimeout(function(){
  97. },1500)
  98. });
  99. $imgSmall.find('li').on('click',function(){
  100. var smallIdx= $(this).index();
  101. if(smallIdx>pageIndex){
  102. playNext(smallIdx-pageIndex)
  103. }
  104. else if(smallIdx<pageIndex){
  105. playPre(pageIndex-smallIdx)
  106. }
  107. });
  108. function playNext(n){
  109. var idx = n ||1;
  110. if(isAnimate) return;
  111. isAnimate = true;
  112. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
  113. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  114. pageIndex = pageIndex+idx;
  115. if( pageIndex ===$imgLength ){
  116. $imgBig.css({'left':'-'+$imgWidth+'px'})
  117. pageIndex = 0;
  118. }
  119. isAnimate = false;
  120. smallImg()
  121. })
  122. }
  123. function playPre(n){
  124. var idx = n ||1;
  125. if(isAnimate) return;
  126. isAnimate = true;
  127. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
  128. pageIndex=pageIndex-idx;
  129. if(pageIndex<0){
  130. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  131. pageIndex = $imgLength-1;
  132. }
  133. isAnimate = false;
  134. smallImg()
  135. })
  136. }
  137. //设置小图的class
  138. function smallImg(){
  139. $imgSmall.children()
  140. .removeClass('active')
  141. .eq(pageIndex) .addClass('active')
  142. }
  143. })();