index.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. //轮播图
  2. let swiper = new Swiper("#swiper1", {
  3. pagination: {
  4. el: ".swiper-pagination"
  5. },
  6. loop: true, //循环
  7. observer: true,//修改swiper自己或子元素时,自动初始化swiper
  8. observeParents: true,//修改swiper的父元素时,自动初始化swiper
  9. speed: 500,
  10. autoplay: {
  11. disableOnInteraction: false, //触碰后自动轮播也不会停止
  12. delay: 3000,
  13. }
  14. });
  15. //上一页、下一页
  16. var pageNum = 1;//默认第一页
  17. function lastPage(){
  18. $('.aboutus-page .box5-content .page-box .img.first1').addClass('active');
  19. $('.aboutus-page .box5-content .page-box .img.last1').removeClass('active');
  20. pageNum = pageNum>1?pageNum-1:1;
  21. $(".aboutus-page .box5-content .cards").animate({
  22. scrollLeft: ($(window).width()*0.25*(pageNum-1)*3 + 20*(pageNum-1)*3)
  23. },300)
  24. }
  25. function nextPage(){
  26. $('.aboutus-page .box5-content .page-box .img.last1').addClass('active');
  27. $('.aboutus-page .box5-content .page-box .img.first1').removeClass('active');
  28. pageNum +=1;
  29. $(".aboutus-page .box5-content .cards").animate({
  30. scrollLeft: ($(window).width()*0.25*(pageNum-1)*3 + 20*(pageNum-1)*3)
  31. },300)
  32. }
  33. //切换卡片
  34. switchCard();//初始化
  35. function switchCard(){
  36. if($('.box6-content .cards.index1').hasClass('first')){
  37. $('.box6-content .cards.index1').removeClass('first');
  38. $('.box6-content .cards.index1').addClass('last');
  39. $('.box6-content .cards.index2').removeClass('last');
  40. $('.box6-content .cards.index2').addClass('first');
  41. $('.box6-content .cards.index1').animate({
  42. "opacity": 0.2,
  43. "z-index": 0,
  44. "transform": 'rotate(-10deg)',
  45. },800);
  46. $('.box6-content .cards.index1 .card div').animate({
  47. "opacity": 0
  48. })
  49. $('.box6-content .cards.index2').animate({
  50. "opacity": 1,
  51. "z-index": 100,
  52. "transform": 'rotate(0)'
  53. },800);
  54. $('.box6-content .cards.index2 .card div').animate({
  55. "opacity": 1
  56. })
  57. setTimeout(function () {
  58. },800)
  59. }else{
  60. $('.box6-content .cards.index1').removeClass('last');
  61. $('.box6-content .cards.index1').addClass('first');
  62. $('.box6-content .cards.index2').removeClass('first');
  63. $('.box6-content .cards.index2').addClass('last');
  64. $('.box6-content .cards.index2').animate({
  65. "opacity": 0.2,
  66. "z-index": 0,
  67. "transform": 'rotate(-10deg)'
  68. },800);
  69. $('.box6-content .cards.index2 .card div').animate({
  70. "opacity": 0
  71. })
  72. $('.box6-content .cards.index1').animate({
  73. "opacity": 1,
  74. "z-index": 100,
  75. "transform": 'rotate(0)'
  76. },800);
  77. $('.box6-content .cards.index1 .card div').animate({
  78. "opacity": 1
  79. })
  80. }
  81. }
  82. //上一页、下一页
  83. function lastPage2(){
  84. switchCard();
  85. $('.aboutus-page .box6-content .page-box .img.first2').addClass('active');
  86. $('.aboutus-page .box6-content .page-box .img.last2').removeClass('active');
  87. }
  88. function nextPage2(){
  89. switchCard();
  90. $('.aboutus-page .box6-content .page-box .img.first2').removeClass('active');
  91. $('.aboutus-page .box6-content .page-box .img.last2').addClass('active');
  92. }