记录fullpage中使用swiper

    $(window).resize(function () {

      Sizeload();
    });
    Sizeload();
    var myFullpage;
    function Sizeload() {
      var winWidth = $(window).width();
      console.log(winWidth > 991, myFullpage, 'zzxx')
      if (winWidth > 991) {
        if (myFullpage) {
          return
        }
        myFullpage = new fullpage('#fullpage', {
          verticalCentered: true,
          anchors: ['anchor1', 'anchor2', 'anchor3', 'anchor4', 'anchor5', 'anchor6', 'anchor7'],
          navigation: true,
          menu: '#menu',
          // autoScrolling:true,
          // scrollHorizontally: true,
          afterLoad: function (origin, destination, direction, trigger) {
            var origin = this;
            console.log(origin.index, destination.index, 'cccc')
            if (destination.index != 0 && (destination.index + 1) % 2 == 0) {
              $(".fp-right").addClass('on');
            } else {
              $(".fp-right").removeClass('on');
            }
          },
          afterRender: function () {
            // alert("DOM结构已完成");
            initDom();

          },
          onLeave: function (prev, i, direction) {
            console.log(i.index, 'index')
            var index = i.index;

            // 这一段解决wow的兼容问题
            $("#fullpage .section").eq(index).find('.wow').each(function () {
              if ($(this).attr('data-wow-delay')) {
                $(this).attr('style', 'animation-delay:' + $(this).attr('data-wow-delay'))
              } else {
                $(this).attr('style', '')
              };
            });
            $("#fullpage .section").eq(index).find('.wow').addClass('animated');
            // 结束
          }

          // sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        });
      } else {
        destroyFullpage();
        initDom()
        myFullpage = undefined;
      }
    }


    function destroyFullpage() {
      console.log(myFullpage, 'myFullpage--销毁')
      if (myFullpage) {
        myFullpage.destroy('all'); // 销毁 fullpage.js
        myFullpage = undefined;
      }
    }



    function initDom() {
      var wow = new WOW({
        animateClass: 'animated',
      });
      wow.init();
      //大图
      var bannerSwiper = new Swiper(".banner-swiper", {
        loop: false,
        speed: 500,
        // autoplay: {
        //   delay: 7000,
        //   disableOnInteraction: false,
        // },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        slidesPerView: 1,
        spaceBetween: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,

        }
      });

      var hproTitswiper = new Swiper(".hpro-titswiper", {
        slidesPerView: "auto"
      });

      var hproConswiper = new Swiper(".hpro-conswiper", {
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar",
        },
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        breakpoints: {
          221: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          449: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          599: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          767: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1200: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1400: {
            slidesPerView: 4,
            spaceBetween: 35,
          },
        },

      });

 

posted @ 2025-04-08 15:29  南瓜壳  阅读(15)  评论(0)    收藏  举报