index.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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 './public.js';
  6. import './main_banner.js';
  7. $(function(){
  8. var k=0;
  9. var liwit=$('.index_cont div').width();
  10. var lilengths=$('.index_cont>div').length;
  11. $('.man_right').click(function(){
  12. k++;
  13. if(k>lilengths-3){
  14. k=lilengths-3
  15. }
  16. $('.index_cont').animate({'marginLeft':-(liwit+63)*k},500)
  17. });
  18. $('.man_left').click(function(){
  19. k--;
  20. if(k<0){
  21. k=0
  22. }
  23. $('.index_cont').animate({'marginLeft':-(liwit+63)*k},500)
  24. });
  25. //精品成果鼠标经过效果
  26. $('.content .cont').hover(function(){
  27. var a_href=$(this).children("a").attr("href");
  28. $('.con_hover').show().children("a").attr("href",a_href);
  29. var lent=$(this).index()-1;
  30. var wid=$(this).width()+10;
  31. if(lent%2===0){
  32. $('.con_hover').css({top:"-36px"})
  33. }else{
  34. $('.con_hover').css({top:"15px"})
  35. }
  36. $('.con_hover').animate({left:lent*wid},50)
  37. })
  38. $('.content').mouseleave(function(){
  39. $('.con_hover').hide();
  40. $('.content .cont').stop(true)
  41. })
  42. });
  43. $(function(){
  44. var img_length=$(".ct-img-big").children().length;
  45. var smallhtml="";
  46. for(var i=1;i<=img_length;i++){
  47. smallhtml+="<li></li>"
  48. }
  49. $(".ct-img-small").html(smallhtml);
  50. var ctwidth=$('.ct-img-small').width();
  51. $('.ct-img-small').css({marginLeft:-ctwidth/2});
  52. $(".ct-img-small").children().eq(0).addClass("active");
  53. var $imgBig=$('.ct-img-big'),
  54. $btnNext=$('.btn-next'),
  55. $btnPre=$('.btn-pre'),
  56. $CT = $('.carouselt'),
  57. $imgSmall=$('.ct-img-small');
  58. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  59. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  60. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  61. var $firstImg=$imgBig.find('li').first(),
  62. $lastImg=$imgBig.find('li').last();
  63. $imgBig.prepend($lastImg.clone());
  64. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  65. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  66. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  67. var pageIndex = 0 ; //img的下标;
  68. var isAnimate = false//防止重复点击 上锁
  69. $btnNext.on('click',function(e){
  70. e.preventDefault();
  71. playNext();
  72. setTimeout(function(){
  73. },1500)
  74. });
  75. $btnPre.on('click',function(e){
  76. e.preventDefault();
  77. playPre();
  78. setTimeout(function(){
  79. },1500)
  80. });
  81. $imgSmall.find('li').on('click',function(){
  82. var smallIdx= $(this).index();
  83. if(smallIdx>pageIndex){
  84. playNext(smallIdx-pageIndex)
  85. }
  86. else if(smallIdx<pageIndex){
  87. playPre(pageIndex-smallIdx)
  88. }
  89. });
  90. function playNext(n){
  91. var idx = n ||1;
  92. if(isAnimate) return;
  93. isAnimate = true;
  94. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  95. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  96. pageIndex = pageIndex+idx;
  97. if( pageIndex ===$imgLength ){
  98. $imgBig.css({'left':'-'+$imgWidth+'px'})
  99. pageIndex = 0;
  100. }
  101. isAnimate = false;
  102. smallImg()
  103. })
  104. }
  105. function playPre(n){
  106. var idx = n ||1;
  107. if(isAnimate) return;
  108. isAnimate = true;
  109. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  110. pageIndex=pageIndex-idx;
  111. if(pageIndex<0){
  112. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  113. pageIndex = $imgLength-1;
  114. }
  115. isAnimate = false;
  116. smallImg()
  117. })
  118. }
  119. //设置小图的class
  120. function smallImg(){
  121. $imgSmall.children()
  122. .removeClass('active')
  123. .eq(pageIndex) .addClass('active')
  124. }
  125. //自动轮播 鼠标进入鼠标离开
  126. var timer =setInterval(function(){
  127. playNext()
  128. },4000);
  129. $CT.hover(function(){
  130. clearInterval(timer)
  131. },function(){
  132. timer =setInterval( function(){
  133. playNext()
  134. },4000)
  135. });
  136. });