main_banner.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. $(function(){
  2. var $imgBig=$('.ct-img-big'),
  3. $btnNext=$('.btn-next'),
  4. $btnPre=$('.btn-pre'),
  5. $CT = $('.carouselt'),
  6. $imgSmall=$('.ct-img-small');
  7. var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
  8. var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
  9. // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
  10. var $firstImg=$imgBig.find('li').first(),
  11. $lastImg=$imgBig.find('li').last();
  12. $imgBig.prepend($lastImg.clone());
  13. $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
  14. $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
  15. $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
  16. var pageIndex = 0 ; //img的下标;
  17. var isAnimate = false//防止重复点击 上锁
  18. $btnNext.on('click',function(e){
  19. e.preventDefault();
  20. playNext();
  21. setTimeout(function(){
  22. },1500)
  23. });
  24. $btnPre.on('click',function(e){
  25. e.preventDefault();
  26. playPre();
  27. setTimeout(function(){
  28. },1500)
  29. });
  30. $imgSmall.find('li').on('click',function(){
  31. var smallIdx= $(this).index();
  32. if(smallIdx>pageIndex){
  33. playNext(smallIdx-pageIndex)
  34. }
  35. else if(smallIdx<pageIndex){
  36. playPre(pageIndex-smallIdx)
  37. }
  38. });
  39. function playNext(n){
  40. var idx = n ||1;
  41. if(isAnimate) return;
  42. isAnimate = true;
  43. $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},1500,function(){
  44. //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
  45. pageIndex = pageIndex+idx;
  46. if( pageIndex ===$imgLength ){
  47. $imgBig.css({'left':'-'+$imgWidth+'px'})
  48. pageIndex = 0;
  49. }
  50. isAnimate = false;
  51. smallImg()
  52. })
  53. }
  54. function playPre(n){
  55. var idx = n ||1;
  56. if(isAnimate) return;
  57. isAnimate = true;
  58. $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){
  59. pageIndex=pageIndex-idx;
  60. if(pageIndex<0){
  61. $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
  62. pageIndex = $imgLength-1;
  63. }
  64. isAnimate = false;
  65. smallImg()
  66. })
  67. }
  68. //设置小图的class
  69. function smallImg(){
  70. $imgSmall.children()
  71. .removeClass('active')
  72. .eq(pageIndex) .addClass('active')
  73. }
  74. //自动轮播 鼠标进入鼠标离开
  75. var timer =setInterval(function(){
  76. playNext()
  77. },3000);
  78. $CT.hover(function(){
  79. clearInterval(timer)
  80. },function(){
  81. timer =setInterval( function(){
  82. playNext()
  83. },3000)
  84. });
  85. });