index.js 4.3 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. var img_length=$(".ct-img-big").children("li").length-2;
  44. var smallhtml="";
  45. for(var i=1;i<=img_length;i++){
  46. smallhtml+="<li></li>"
  47. }
  48. $(".ct-img-small").html(smallhtml);
  49. var ctwidth=$('.ct-img-small').width();
  50. $('.ct-img-small').css({marginLeft:-ctwidth/2});
  51. $(".ct-img-small").children().eq(0).addClass("active");
  52. var $imgBig=$('.ct-img-big'),
  53. $btnNext=$('.btn-next'),
  54. $btnPre=$('.btn-pre'),
  55. $CT = $('.carouselt'),
  56. $imgSmall=$('.ct-img-small');
  57. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  58. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  59. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  60. var $firstImg=$imgBig.find('li').first(),
  61. $lastImg=$imgBig.find('li').last();
  62. $imgBig.prepend($lastImg.clone());
  63. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  64. $imgBig.css("width", $imgWidth*$imgBig.children().length+"px")//这时的个数是添加完以后的个数
  65. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  66. var pageIndex = 0 ; //img的下标;
  67. var isAnimate = false//防止重复点击 上锁
  68. $btnNext.on('click',function(e){
  69. e.preventDefault();
  70. playNext();
  71. setTimeout(function(){
  72. },1500)
  73. });
  74. $btnPre.on('click',function(e){
  75. e.preventDefault();
  76. playPre();
  77. setTimeout(function(){
  78. },1500)
  79. });
  80. $imgSmall.find('li').on('click',function(){
  81. var smallIdx= $(this).index();
  82. if(smallIdx>pageIndex){
  83. playNext(smallIdx-pageIndex)
  84. }
  85. else if(smallIdx<pageIndex){
  86. playPre(pageIndex-smallIdx)
  87. }
  88. });
  89. function playNext(n){
  90. var idx = n ||1;
  91. if(isAnimate) return;
  92. isAnimate = true;
  93. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  94. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  95. pageIndex = pageIndex+idx;
  96. if( pageIndex ===$imgLength ){
  97. $imgBig.css({'left':'-'+$imgWidth+'px'})
  98. pageIndex = 0;
  99. }
  100. isAnimate = false;
  101. smallImg()
  102. })
  103. }
  104. function playPre(n){
  105. var idx = n ||1;
  106. if(isAnimate) return;
  107. isAnimate = true;
  108. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  109. pageIndex=pageIndex-idx;
  110. if(pageIndex<0){
  111. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  112. pageIndex = $imgLength-1;
  113. }
  114. isAnimate = false;
  115. smallImg()
  116. })
  117. }
  118. //设置小图的class
  119. function smallImg(){
  120. $imgSmall.children()
  121. .removeClass('active')
  122. .eq(pageIndex) .addClass('active')
  123. }
  124. //自动轮播 鼠标进入鼠标离开
  125. var timer =setInterval(function(){
  126. playNext()
  127. },3000);
  128. $CT.hover(function(){
  129. clearInterval(timer)
  130. },function(){
  131. timer =setInterval( function(){
  132. playNext()
  133. },3000)
  134. });
  135. });