main_banner.js 3.2 KB

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