pig/public/assets/addons/wwh/js/index.js

$(function () {
  /*
      eg: <div class="wow animate slideInLeft" data-wow-delay="200ms"></div>
      可选参数：
      data-wow-duration（动画持续时间）
      data-wow-delay（动画延迟时间）
      data-wow-offset（元素的位置露出后距离底部多少像素执行）
      data-wow-iteration（动画执行次数）
  */
  var volist = 0;
  if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
    var wow = new WOW({
      boxClass: 'wow', //	需要执行动画的元素的 class
      animateClass: 'animated', // animation.css 动画的 class
      offset: 0, // 元素的位置露出后距离底部多少像素执行
      mobile: true, // 是否在移动设备上执行动画
      live: true, // 异步加载的内容是否有效
      callback: function (e) {
        if ($(e).attr('data-type') == 'volist') {
          volist += 100;
          $(e).css("animation-delay", volist + 'ms');
        }
      }
    });
    wow.init();
  }

  setTimes();
  var timeOuts = null
  function setTimes() {
    timeOuts = setTimeout(function() {
      volist = 0;
    }, 150);
  }

  var st = $(window).scrollTop();
  $(window).scroll(function () {
    /*滚动时先清除上一个定时器,然后再设置新的定时器,以免出现多个定时器造成混乱*/
    clearTimeout(timeOuts);
    setTimes();

    st = $(window).scrollTop();
  });

  /*Banner图*/
  var Swiper1 = new Swiper('.swiper_in1', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    observer:true,
    observeParents:true,
    //autoplay:800,
    autoplay:300,
    loop:true,
    speed:200,

    onInit: function (swiper) {
      if ($('.swiper_in1 .swiper-slide').eq(swiper.activeIndex).find('video').length == 0) {
        swiper.startAutoplay();
      } else {
        swiper.stopAutoplay();
        var video = document.getElementById("my-video");
        video.addEventListener('ended', function () {
          swiper.slideNext();
          swiper.startAutoplay();
        });
      }
      var len = $(".swiper-container.banner .swiper-pagination-bullet").length;
      if (len < 2) {
        $(".swiper-container.banner .swiper-pagination").hide();
      }
    },
    onSlideChangeStart: function(Swiper1){
      // 暂停所有视频
      var videos = document.getElementsByTagName('video');
      for (var i = videos.length - 1; i >= 0; i--) {
        (function(){
          var p = i;
          videos[p].addEventListener('play',function(){
            pauseAll(p);
          })
        })()
      }
      function pauseAll(index){
        for (var j = videos.length - 1; j >= 0; j--) {
          if (j!=index) videos[j].pause();
        }
      };
      // 判断swiper-slide-active是否有视频
      if($(".swiper_in1 .swiper-slide-active video").length>0){
        // 停止自动切换
        Swiper1.stopAutoplay();
        // 动态增加id
        $(".swiper_in1 .swiper-slide-active video").attr("id","video_01");
        var _video=document.getElementById("video_01");
        // 播放视频
        _video.play();

        // 切换后重新播放视频
        _video.currentTime = 0;
        // 静音
        _video.volume = 0;
        // 监听视频播放结束0
        _video.addEventListener('ended', function () {

          Swiper1.slideNext();

          //重新开始轮播banner

          Swiper1.startAutoplay();
        });
      }
    },
    onSlideChangeEnd: function(Swiper1){
      //动态移除id
      $(".swiper_in1 .swiper-slide-active video").attr("id","");
    }
  });
  
});

/*产品分类侧栏*/
$(function(){
  $('.pn-list .pn-tit.cursleect').parents('.pn-content').slideDown().prev('.pn-tit').addClass('cur cut');

  var retractLeft = $(".pn-list").width();
  $('.pn-box').hover(function(){
    $('.pn-list').addClass('on')
    $('.pn-retract').css("left",retractLeft)
  },function(){
    $('.pn-list').removeClass('on')
    $('.pn-retract').css("left",-retractLeft)
  })

  $('.pn-retract').hover(function() {
    $('.pn-list').removeClass('on');
    $('.pn-retract').css("left",-retractLeft)
  },function(){
    $('.pn-list').addClass('on')
    $('.pn-retract').css("left",retractLeft)
  })

  $('.pn-list li .pn-tit-one').on('click',function(){
    var sss = $(this).parent('li').index();
    var len = $('.pn-list li').length-1;
    if (sss == len) {
      var off = $(this).offset().top - ($('.pn-list').height()/2);
      $('.pn-list').stop().animate({'scrollTop':off},500);
    };

    if (!$(this).hasClass('cut')) {
      $(this).addClass('cut').parents('li').siblings('li').find('.pn-tit-one').removeClass('cut');
      $(this).next('.pn-con-one').slideDown().parents('li').siblings('li').find('.pn-con-one').slideUp()
    }else{
      $(this).removeClass('cut')
      $(this).next('.pn-con-one').slideUp()
    }
  })
  $('.pn-list li .pn-tit-two').on('click',function(){
    var sss = $(this).parent('li').index();
    var len = $('.pn-list li').length-1;
    if (sss == len) {
      var off = $(this).offset().top - ($('.pn-list').height()/2);
      $('.pn-list').stop().animate({'scrollTop':off},500);
    };

    if (!$(this).hasClass('cut')) {
      $(this).addClass('cut').parents('li').siblings('li').find('.pn-tit-two').removeClass('cut');
      $(this).next('.pn-con-two').slideDown().parents('li').siblings('li').find('.pn-con-two').slideUp()
    }else{
      $(this).removeClass('cut')
      $(this).next('.pn-con-two').slideUp()
    }
  })

  $('.pn-list li .pn-tit-three').on('click',function(){
    if (!$(this).hasClass('cur')) {
      $(this).addClass('cur').siblings('.pn-tit-three').removeClass('cur').parents('li').siblings('li').find('.pn-tit-three').removeClass('cur');
      $(this).next('.pn-con-three').slideDown().siblings('.pn-con-three').slideUp().parents('li').siblings('li').find('.pn-con-three').slideUp()
    }else{
      $(this).removeClass('cur')
      $(this).next('.pn-con-three').slideUp()
    }
  })

});