index.js 3.5 KB

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