highTechCognizance.js 4.9 KB

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