highTechCognizance.js 5.2 KB

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