index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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. console.log(img_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.css("width", $imgWidth*$imgBig.children().length+"px")//这时的个数是添加完以后的个数
  66. console.log($imgBig.width());
  67. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  68. var pageIndex = 0 ; //img的下标;
  69. var isAnimate = false//防止重复点击 上锁
  70. $btnNext.on('click',function(e){
  71. e.preventDefault();
  72. playNext();
  73. setTimeout(function(){
  74. },1500)
  75. });
  76. $btnPre.on('click',function(e){
  77. e.preventDefault();
  78. playPre();
  79. setTimeout(function(){
  80. },1500)
  81. });
  82. $imgSmall.find('li').on('click',function(){
  83. var smallIdx= $(this).index();
  84. if(smallIdx>pageIndex){
  85. playNext(smallIdx-pageIndex)
  86. }
  87. else if(smallIdx<pageIndex){
  88. playPre(pageIndex-smallIdx)
  89. }
  90. });
  91. function playNext(n){
  92. var idx = n ||1;
  93. if(isAnimate) return;
  94. isAnimate = true;
  95. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  96. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  97. pageIndex = pageIndex+idx;
  98. if( pageIndex ===$imgLength ){
  99. $imgBig.css({'left':'-'+$imgWidth+'px'})
  100. pageIndex = 0;
  101. }
  102. isAnimate = false;
  103. smallImg()
  104. })
  105. }
  106. function playPre(n){
  107. var idx = n ||1;
  108. if(isAnimate) return;
  109. isAnimate = true;
  110. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  111. pageIndex=pageIndex-idx;
  112. if(pageIndex<0){
  113. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  114. pageIndex = $imgLength-1;
  115. }
  116. isAnimate = false;
  117. smallImg()
  118. })
  119. }
  120. //设置小图的class
  121. function smallImg(){
  122. $imgSmall.children()
  123. .removeClass('active')
  124. .eq(pageIndex) .addClass('active')
  125. }
  126. //自动轮播 鼠标进入鼠标离开
  127. var timer =setInterval(function(){
  128. playNext()
  129. },3000);
  130. $CT.hover(function(){
  131. clearInterval(timer)
  132. },function(){
  133. timer =setInterval( function(){
  134. playNext()
  135. },3000)
  136. });
  137. });