HTML+CSS+Query+Sick.js实现视频会循环播放并无缝切换到下一个视频,形成一个自动播放的轮播

在这里插入图片描述
HTML结构:

.video-carousel 是轮播的容器,每个视频被包裹在 .video-container 中。
CSS样式:

.video-container 使用 padding-bottom: 56.25% 来确保视频的宽高比为 16:9。
video 标签使用 object-fit: cover 来保证视频在容器中按比例填充。
JavaScript:

slick 初始化时设置了 autoplay, autoplaySpeed, 和 speed,其中 autoplaySpeed 和 speed 确保视频以无缝的方式切换。
beforeChange 事件暂停当前播放的视频。
afterChange 事件开始播放当前滑块的视频。
这样,视频会循环播放并无缝切换到下一个视频,形成一个自动播放的轮播。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./css/base-v3.0.min.css" type="text/css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
  </head>
  <style>
    .ys_main {
      margin-top: 120px;
    }

    .ys_banner {
      width: 100%;
      position: relative;
    }

    .ys_ban_imgbox {
      position: relative;
      z-index: 1;
    }

    .ys_ban_imgbox img {
      width: 100%;
    }

    .ys_ban_imgbox::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      /* background: rgba(0, 0, 0, .3); */
    }

    .ys_ban_ph {
      display: none;
    }

    .ys_ban_video {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 100%;
      object-fit: cover;
    }

    .ys_ban_video {
      top: 0;
      left: 0;
      transform: inherit;
    }

    .act.slick-active .ys_ban_title1 {
      animation-delay: 0.1s;
    }

    .act.slick-active .ys_ban_title2 {
      animation-delay: 0.2s;
    }

    .act.slick-active .ys_ban_info {
      animation-delay: 0.3s;
    }

    .act.slick-active .ys_ban_info_btn {
      animation-delay: 0.4s;
    }

    .slick-dots {
      bottom: 50px;
    }
  </style>
  <body>
    <!-- 主体内容 -->
    <main class="ys_main">
      <!-- banner区 -->
      <section class="ys_banner">
        <ul class="ys_ban_slick">
          <!-- 默认第一个加act类名 -->
          <li class="ys_ban_li act">
            <div class="ys_ban_imgbox">
              <!-- pc端图片 -->
              <img class="ys_ban_pc" src="./h.jpg" alt="banner_index.jpg" />
              <!-- 视频不传则没有video标签 -->
              <video
                class="ys_ban_video"
                src="./720p.mp4"
                muted
                poster="./h.jpg"
              ></video>
              <!-- 移动端图片 -->
              <img class="ys_ban_ph" src="./h.jpg" alt="a1_bannerph01.jpg" />
            </div>
          </li>
        </ul>
      </section>
    </main>

    <script src="./js/public.js"></script>
    <script src="./js/base-v3.0.min.js"></script>
    <script>
      $(function () {
        bannerInit()
      })
      function bannerInit() {
        // 轮播初始化
        $('.ys_ban_slick').slick({
          arrows: true,
          speed: 1000,
          autoplaySpeed: 4000,
          pauseOnHover: false,
          dots: true,
        })
        // 视频播完轮播
        ys.banVideo('.ys_ban_slick')
        $('.ys_ban_slick').on(
          'beforeChange',
          function (event, slick, currentSlide, nextSlide) {
            $('.ys_ban_li').removeClass('act')
          }
        )
      }
    </script>
  </body>
</html>

在这里插入图片描述

/*

回到顶部功能 (t(s)):点击按钮后,页面会平滑地滚动回到顶部。

固定导航栏 (i(t)):当页面滚动超过一定距离时,使导航栏固定在页面顶部。

视频播放控制 (n(t)):针对带有视频的轮播图,控制视频的播放与轮播之间的交互。如果视频存在且在轮播图中,轮播会暂停并播放视频,视频结束后自动继续轮播。

自定义选择框 (e(s,t)):实现自定义下拉选择框的功能,点击选择框后,显示可选项,并处理用户的选择操作。

模态框 (o(s,t,i,n)):点击触发模态框的显示,可以动态加载内容(如图片或视频),并提供关闭模态框的功能。

视频弹窗 (a(t,i)):用于显示视频的弹出层,支持播放本地视频或嵌入iframe。

滚动条美化 (l(s,t,i)):为指定元素添加自定义滚动条样式,并支持垂直或水平滚动。

数字动画 (c(s,t,i)):实现数字的动画增长效果,当元素出现时,会从0开始递增到指定的数值。

社交分享 (r(t,i)):为页面添加社交媒体的分享按钮,如微信、微博、Twitter、Facebook等,并生成对应的分享链接。

导航栏处理 (d(t,i)):处理页面滚动时导航栏的固定与非固定状态,以及其他导航栏相关的动态效果。

移动端导航处理 (h(s)):用于移动端的导航栏操作,包括菜单按钮的展开与收起,二级菜单的显示与隐藏,语言选择等。
*/

(function (s) {
  function t(s) {
    s = s || 500;
    $("html,body").stop().animate({
      scrollTop: 0
    }, s)
  }

  function i(t) {
    function i() {
      $(s).scrollTop() > 0 ? n.addClass("isfixed") : n.removeClass("isfixed")
    }
    var n = $(t);
    $(function () {
        i()
      }),
      $(s).on("scroll", i),
      $(s).on("load", i),
      $(s).on("resize", i)
  }

  function n(t) {
    // 获取传入的元素并赋值给变量 i
    var i = $(t),
      // 初始化一个标志变量 n,表示轮播是否在播放状态
      n = !0;

    // 检查屏幕宽度是否大于1200像素,并且元素中是否包含视频
    if ($(s).width() > 1200 && i.find("video").length > 0) {

      // 内部函数 e:负责初始化整个视频与轮播的交互功能
      function e() {
        o(), // 调用函数 o,处理第一个视频的播放逻辑
          l(), // 调用函数 l,为所有视频添加结束事件的监听
          a() // 调用函数 a,监听轮播图的切换事件
      }

      // 内部函数 o:处理第一个视频的播放逻辑
      function o() {
        var s = i.find(".slick-slide[data-slick-index=0]"), // 获取第一个轮播滑块
          t = s.find("video"); // 查找该滑块中的视频元素
        // 如果存在视频元素
        t.length > 0 ? (
          i.slick("slickPause"), // 暂停轮播
          i.get(0).slick.slideCount < 2 && t.attr("loop", "loop"), // 如果轮播图少于两张,设置视频循环播放
          // 如果视频处于暂停状态,延迟100毫秒后播放视频
          t.get(0).paused && setTimeout(function () {
            t.get(0).play()
          }, 100)
        ) : i.slick("slickPlay") // 如果没有视频,则继续播放轮播
      }

      // 内部函数 a:监听轮播图切换事件
      function a() {
        i.on("afterChange", function (s, t, e) {
          // 当轮播图切换后,暂停所有视频并重置播放时间
          i.find("video").each(function () {
            var s = $(this).get(0);
            s.pause(),
              s.currentTime = 0
          });
          // 获取当前滑块并查找其中的视频
          var o = $(t.$slides[e]),
            a = o.find("video");
          // 如果存在视频,暂停轮播并播放视频,否则继续播放轮播
          a.length > 0 ? (
            i.slick("slickPause"),
            a.get(0).play()
          ) : n && i.slick("slickPlay")
        })
      }

      // 内部函数 l:为每个视频添加播放结束事件的监听
      function l() {
        i.find("video").each(function () {
          var s = $(this).get(0);
          s.onended = function () {
            // 当视频播放结束时,继续轮播并播放下一个滑块
            n && (
              i.slick("next"),
              i.slick("slickPlay")
            )
          }
        })
      }

      // 调用 e 函数,初始化视频和轮播图的交互
      e();
    } else
      // 如果屏幕宽度小于1200像素或没有视频,则直接播放轮播图
      i.slick("play");

    // 定义一个对象 c,提供播放和暂停轮播图的功能
    var c = {
      play: function () {
        i.slick("slickPlay"),
          n = !0
      },
      pause: function () {
        n = !1,
          i.slick("slickPause")
      }
    };

    // 返回控制对象 c,允许外部调用 play 和 pause 方法
    return c
  }


  function e(s, t) {
    var i = $(s);
    i.find(".ys_select_li").each(function () {
        var s = $(this).index();
        null == $(this).attr("data-id") && $(this).attr("data-id", s),
          $(this).attr("data-value", $(this).text())
      }),
      i.find(".ys_select_hd").click(function (s) {
        if (s.stopPropagation(),
          $(this).toggleClass("on"),
          $(this).parents(".ys_select").hasClass("zindex"))
          $(this).siblings(".ys_select_bd").removeClass("showscroll"),
          $(this).siblings(".ys_select_bd").stop().slideUp(function () {
            $(this).parents(".ys_select").removeClass("zindex")
          });
        else {
          var t = this;
          setTimeout(function () {
              $(t).parents(".ys_select").addClass("zindex")
            }, 200),
            $(this).siblings(".ys_select_bd").stop().slideDown(function () {
              $(this).mCustomScrollbar("update"),
                $(this).addClass("showscroll")
            })
        }
        $(".ys_select_hd").not(this).removeClass("on"),
          $(".ys_select_hd").not(this).siblings(".ys_select_bd").removeClass("showscroll").stop().slideUp();
        t = this;
        setTimeout(function () {
          $(".ys_select_hd").not(t).parents(".ys_select").removeClass("zindex")
        }, 200)
      }),
      i.find(".ys_select_bd").on("click", ".ys_select_li", function () {
        var s = $(this).text(),
          i = $(this).data("value"),
          n = $(this).data();
        $(this).parents(".ys_select_bd").siblings(".ys_select_hd").find(".ys_select_show").val(s),
          $(this).parents(".ys_select_bd").siblings(".ys_select_hd").find(".ys_select_real").attr("data-id", n.id).val(i).trigger("change"),
          $(this).addClass("on").siblings().removeClass("on"),
          t && t(n)
      }),
      $("body").click(function () {
        $(".ys_select_hd").removeClass("on"),
          $(".ys_select_bd").removeClass("showscroll").stop().slideUp(function () {
            $(this).parents(".ys_select").removeClass("zindex")
          })
      }),
      i.find(".ys_select_bd").mCustomScrollbar({
        axis: "y",
        scrollInertia: 500,
        theme: "dark",
        scrollbarPosition: "outside"
      })
  }

  function o(s, t, i, n) {
    var e = $(t);
    $("body").on("click", s, function () {
        var s = $(this);
        if (e.stop().fadeIn(),
          n) {
          function t(t) {
            $.each(t, function (t, i) {
              var n = i[2],
                o = s.find(i[0]).length > 0 ? s.find(i[0]) : s;
              "text" != n && n || e.find(i[1]).text(o.text()),
                "img" == n && e.find(i[1]).attr({
                  src: o.attr("src")
                }),
                "attr" == n && (console.log(i[3], o),
                  e.find(i[1]).html(o.attr(i[3]))),
                "html" == n && e.find(i[1]).html(o.html())
            })
          }
          t(n)
        }
        S.hide(),
          C.stop()
      }),
      $("body").on("click", ".ys_modal_close", function () {
        $(this).parents(t).stop().fadeOut(function () {
          S.show(),
            C.start(),
            n && $.each(n, function (s, t) {
              e.find(t[1]).empty()
            })
        })
      });
    i = i || ".ys_modal_content";
    "noscroll" != i ? e.find(i).mCustomScrollbar({
      axis: "y",
      scrollInertia: 500,
      theme: "dark"
    }) : e.find(".ys_modal_content").addClass("noscroll")
  }

  function a(t, i) {
    var n;
    if ($(".ys_videom").length > 0)
      n = $(".ys_videom");
    else {
      var e = '<div class="ys_videom"><div class="ys_videom_container"><div class="ys_videom_close"><i class="iconfont icon-close"></i></div><div class="ys_videom_content"><div class="ys_videom_iframebox"></div></div></div></div>';
      n = $(e),
        $("body").append(n)
    }
    var o = {
      $self: n,
      close: function () {
        S.show(),
          C.start(),
          n.hide(),
          n.find(".ys_videom_video").remove(),
          n.find(".ys_videom_iframebox").hide().find("iframe").remove()
      },
      show: function () {
        S.hide(),
          C.stop(),
          n.show()
      }
    };
    $("body").on("click", t, function () {
        var t = $(this).attr("data-type"),
          e = $(this).attr("data-src");
        if ("video" == t) {
          n.find(".ys_videom_video").length > 0 && n.find(".ys_videom_video").remove();
          var a = $(this).data("poster"),
            l = $('<video playsinline x5-video-player-type="h5" controls class="ys_videom_video"></video>');
          $(s).width() < 767 && -1 != e.indexOf("http") && (l = $('<video muted playsinline x5-video-player-type="h5" controls class="ys_videom_video"></video>'),
              l.get(0).muted = !1),
            l.append($("<source src=" + e + ">")),
            l.attr("poster", a),
            n.find(".ys_videom_content").append(l),
            l.stop().show(),
            i && l.get(0).play()
        } else {
          if ("iframe" != t)
            return;
          n.find(".ys_videom_iframebox").stop().show().html(e)
        }
        o.show()
      }),
      n.on("click", ".ys_videom_close", function () {
        o.close()
      })
  }

  function l(s, t, i) {
    var n = $(s);
    scrollbarAxis = i || "y",
      scrollbarPosition = t ? "inside" : "outside",
      n.mCustomScrollbar({
        axis: scrollbarAxis,
        scrollInertia: 500,
        theme: "dark",
        scrollbarPosition: scrollbarPosition
      })
  }

  function c(s, t, i) {
    var n = $(s);
    i = i || 1e3;
    n.appear(function () {
      function s(s) {
        return (s || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,")
      }
      var n = $(this).text();
      $(this).width($(this).width());
      var e = $(this).data("to");
      e || (e = n);
      var o = parseFloat(e.toString().replace(/,/g, "")),
        a = parseInt(o).toString().length,
        l = !1,
        c = e.toString().split(",");
      c[1] && (l = !0),
        formatter = t ? function (t, i) {
          for (var n = t.toFixed(i.decimals), e = parseInt(n).toString().length, o = 0; o < a - e; o++)
            n = "0" + n;
          return l && (n = s(n)),
            n
        } :
        function (t, i) {
          var n = t.toFixed(i.decimals);
          return l && (n = s(n)),
            n
        },
        $(this).countTo({
          speed: i,
          refreshInterval: 60,
          formatter: formatter,
          onComplete: function () {
            $(this).removeAttr("style"),
              $(this).text(n)
          }
        })
    })
  }

  function r(t, i) {
    t = t ? encodeURI(t) : encodeURI($("h1").text()),
      i = i ? encodeURI(i) : encodeURI($("p").eq(0).text().replace(" ", ""));
    if ($(".ys_share_wechat").click(function () {
        var t;
        if ($(".ys_wechat").length > 0)
          t = $(".ys_wechat");
        else {
          var i = '<div class="ys_wechat"><div class="ys_wechat_cont"><div id="qrcode"><div class="ys_wechat_cont_parga"><p></p></div><div class="ys_wechat_cont_btn"><i class="iconfont icon-close"></i></div></div></div></div>';
          t = $(i),
            $("body").append(t)
        }
        var n = $(".ys_wechat_cont canvas").length;
        console.log(n),
          n > 0 && $(".ys_wechat_cont canvas").remove();
        var e = s.location.href;
        $("#qrcode").qrcode(e),
          $(".ys_wechat").stop().fadeIn(),
          S.hide(),
          C.stop(),
          t.on("click", ".ys_wechat_cont_btn", function () {
            $(".ys_wechat").stop().fadeOut(function () {
              S.show(),
                C.start()
            })
          })
      }),
      $(".ys_share_sinaminiblog").length > 0) {
      var n = s.location.href,
        e = "https://service.weibo.com/share/share.php?url=" + n + "&title=" + t + " - " + i,
        o = $(".ys_share_sinaminiblog").attr("title");
      $(".ys_share_sinaminiblog").attr("title", o).css("cursor", "pointer").click(function () {
        s.open(e, "_blank")
      })
    }
    if ($(".ys_share_twitter").length > 0) {
      var a = s.location.href;
      console.log(a);
      var l = "https://twitter.com/intent/tweet?text=" + t + " " + a,
        c = $(".ys_share_twitter").attr("title");
      $(".ys_share_twitter").attr("title", c).css("cursor", "pointer").click(function () {
        s.open(l, "_blank")
      })
    }
    if ($(".ys_share_facebook").length > 0) {
      var r = s.location.href;
      console.log(r);
      var d = "https://www.facebook.com/share.php?src=bm&u=" + r,
        h = $(".ys_share_facebook").attr("title");
      $(".ys_share_facebook").attr("title", h).css("cursor", "pointer").click(function () {
        s.open(d, "_blank")
      })
    }
  }

  function d(t, i) {
    function n() {
      if ($(s).width() > 1199)
        var n = $(".ys_hd_pc").height();
      else
        n = 64;
      var e = $(s).scrollTop(),
        o = i.offset().top - n,
        a = o + i.height() - $(s).scrollTop() - t.height();
      e > o ? t.addClass("ys_fixed") : t.removeClass("ys_fixed"),
        a < 0 ? t.addClass("ys_notfixed") : t.removeClass("ys_notfixed")
    }

    function e() {
      n()
    }
    t = $(t),
      i = $(i);
    e(),
      $(s).on("load", function () {
        e()
      }),
      $(s).resize(function () {
        e()
      }),
      $(s).scroll(function () {
        n()
      })
  }

  function h(s) {
    function t() {
      $(".ys_phnav_menubtn").click(function () {
          $(this).hasClass("on") ? (w.scrollbar.show(),
              w.lenisStart()) : (w.scrollbar.hide(),
              w.lenisStop()),
            $(this).toggleClass("on"),
            $(".ys_phnav_menu").stop().slideToggle()
        }),
        $(".ys_phnav_lisbox").click(function () {
          var s = $(this).siblings("ul");
          s.length > 0 && ($(this).find(".ys_phnav_icon").toggleClass("on"),
              s.stop().slideToggle()),
            $(this).parent().siblings().find("ul").stop().slideUp(),
            $(this).parent().siblings().find(".ys_phnav_icon").removeClass("on")
        }),
        $(".ys_phnav_lisbox a").click(function (s) {
          s.stopPropagation()
        })
    }

    function i() {
      $(".ys_phnavss_btn").click(function (s) {
          s.stopPropagation(),
            $(".ys_phnavss_xl").stop().slideToggle(),
            $(".ys_phnav_menubtn").hasClass("on") && $(".ys_phnav_menubtn").trigger("click"),
            $(this).toggleClass("on")
        }),
        $(".ys_phnavss_xl").click(function (s) {
          s.stopPropagation()
        }),
        $("body").click(function () {
          $(".ys_phnavss_xl").stop().slideUp()
        }),
        $(".ys_phnav_menubtn").click(function (s) {
          s.stopPropagation(),
            $(".ys_phnavss_btn").hasClass("on") && $(".ys_phnavss_btn").trigger("click"),
            $(this).hasClass("on") ? (w.scrollbar.show(),
              w.lenisStart()) : (w.scrollbar.hide(),
              w.lenisStop(),
              $(".ys_phnav2_lang_modal").removeClass("on")),
            $(this).toggleClass("on"),
            $(".ys_phnav_menu").toggleClass("on")
        }),
        $(".ys_phnav_lisbox").click(function () {
          var s = $(this).siblings("ul");
          s.length > 0 && ($(this).find(".ys_phnav_icon").toggleClass("on"),
              s.stop().slideToggle()),
            $(this).parent().siblings().find("ul").stop().slideUp(),
            $(this).parent().siblings().find(".ys_phnav_icon").removeClass("on")
        }),
        $(".ys_phnav_lisbox a").click(function (s) {
          s.stopPropagation()
        }),
        $(".ys_phnav2_lang_btn").click(function () {
          $(".ys_phnav2_lang_modal").addClass("on")
        }),
        $(".ys_phnav2_lang_back").click(function () {
          $(".ys_phnav2_lang_modal").removeClass("on")
        })
    }

    function n() {
      w.modal(".ys_phnavss_btn", ".ys_phnavss_modal"),
        $(".ys_phnav_menubtn").click(function () {
          w.scrollbar.hide(),
            w.lenisStop(),
            $(this).addClass("on"),
            $(".ys_phnav_menu").addClass("on")
        }),
        $(".ys_phmenu_close").click(function () {
          w.scrollbar.show(),
            w.lenisStart(),
            $(".ys_phnav_menubtn").removeClass("on"),
            $(".ys_phnav_menu").removeClass("on")
        }),
        $(".ys_phnav_lisbox").click(function () {
          var s = $(this).siblings(".ys_phsubnav_modal");
          s.length > 0 && s.addClass("on")
        }),
        $(".ys_phnav_lisbox a").click(function (s) {
          s.stopPropagation()
        }),
        $(".ys_phsubnav_close").click(function () {
          $(this).parents(".ys_phsubnav_modal").eq(0).removeClass("on")
        }),
        $(".ys_phnav3_lang_hd").click(function () {
          $(this).toggleClass("on"),
            $(".ys_phnav3_lang_bd").stop().slideToggle()
        }),
        $(".ys_phnav3_lang_hd a").click(function (s) {
          s.stopPropagation()
        })
    }

    function e() {
      w.modal(".ys_phnavss_btn", ".ys_phnavss_modal"),
        $(".ys_phnav_menubtn").click(function () {
          $(this).hasClass("on") ? (w.scrollbar.show(),
              w.lenisStart()) : (w.scrollbar.hide(),
              w.lenisStop()),
            $(this).toggleClass("on"),
            $(".ys_phnav_menu").stop().slideToggle()
        }),
        $(".ys_phnav_lisbox").click(function () {
          var s = $(this).siblings("ul");
          s.length > 0 && ($(this).find(".ys_phnav_icon").toggleClass("on"),
              s.stop().slideToggle()),
            $(this).parent().siblings().find("ul").stop().slideUp(),
            $(this).parent().siblings().find(".ys_phnav_icon").removeClass("on")
        }),
        $(".ys_phnav_lisbox a").click(function (s) {
          s.stopPropagation()
        })
    }
    switch (s) {
      case 1:
        t();
        break;
      case 2:
        i();
        break;
      case 3:
        n();
        break;
      case 4:
        e();
        break;
      default:
        t()
    }
  }

  function _(s, t, i) {
    var n = $(s),
      e = n.css("animation-duration");
    e = "0s" == e ? 1e3 : 1e3 * parseFloat(e),
      n.addClass("animated " + t),
      "show" == i && n.stop().show(),
      setTimeout(function () {
        "hide" == i ? n.stop().hide() : "show" != i && i && i(),
          n.removeClass(t)
      }, e)
  }

  function f() {
    (s.devicePixelRatio > 1 || s.devicePixelRatio < 1) && alert("当前页面缩放比例异常,请设置成100%"),
      s.screen.deviceXDPI != s.screen.logicalXDPI && alert("当前页面缩放比例异常,请设置成100%")
  }

  function p() {
    $("link").each(function () {
      var s = $(this).attr("href");
      (s.indexOf("main.css") > 0 || s.indexOf("media.css") > 0) && $(this).attr("href", s + "?" + (new Date).getTime())
    })
  }

  function v() {
    $(".slick-slider").slick("pause")
  }

  function u(t, i, n) {
    function e(t, i, n) {
      t = t || "tp=",
        i = i || $(".ys_hd_pc").height() || 0,
        n = n || 500;
      $(s).width() < 1200 && (i = 64);
      var e = s.location.href.split(t);
      isNaN(e[1]) || $("html,body").animate({
        scrollTop: $('[data-page="' + e[1] + '"]').offset().top - i
      }, n)
    }
    $(s).on("load", function () {
      e(t, i, n)
    })
  }

  function y() {
    function s(t) {
      C.raf(t),
        requestAnimationFrame(s)
    }
    C = new Lenis,
      C.on("scroll", s => {}),
      requestAnimationFrame(s)
  }

  function m() {
    C.stop()
  }

  function g() {
    C.start()
  }

  function b() {
    return !!(s.ActiveXObject || "ActiveXObject" in s)
  }

  function k(s, t) {
    var i = t ? $(t) : $("a");
    i.each(function () {
      var t = $(this).attr("href");
      t && null != t && -1 == t.indexOf("javascript") && (-1 == t.indexOf("?") && (t += "?"),
        $(this).attr("href", t + s))
    })
  }

  function x(s) {
    s = s || 0;
    $(this).appear(function () {
      $(this).slick("play")
    }, {
      accY: s
    })
  }
  var C, w = {};
  s.ys && (w = s.ys);
  var S = {
    $html: $("html"),
    $body: $("body"),
    originalBodyPad: null,
    scrollbarWidth: 0,
    hide: function () {
      this.$body = $("body"),
        this.checkScrollbar(),
        this.setScrollbar(),
        this.$html.css("overflow", "hidden")
    },
    show: function () {
      this.$body = $("body"),
        this.$html.removeAttr("style"),
        this.resetScrollbar()
    },
    checkScrollbar: function () {
      var t = s.innerWidth;
      if (!t) {
        var i = document.documentElement.getBoundingClientRect();
        t = i.right - Math.abs(i.left)
      }
      this.bodyIsOverflowing = document.body.clientWidth < t,
        this.scrollbarWidth = this.measureScrollbar()
    },
    setScrollbar: function () {
      var s = parseInt(this.$body.css("padding-right") || 0, 10);
      this.originalBodyPad = document.body.style.paddingRight || "",
        this.bodyIsOverflowing && this.$body.css("padding-right", s + this.scrollbarWidth)
    },
    measureScrollbar: function () {
      var s = document.createElement("div");
      s.style.position = "absolute",
        s.style.top = "-9999px",
        s.style.width = "50px",
        s.style.height = "50px",
        s.style.overflow = "scroll",
        this.$body.append(s);
      var t = s.offsetWidth - s.clientWidth;
      return this.$body[0].removeChild(s),
        t
    },
    resetScrollbar: function () {
      this.$body.css("padding-right", 0)
    },
    isMobileSafari: function () {
      var s = navigator.userAgent.toLowerCase(),
        t = -1 != s.indexOf("chrome"),
        i = -1 != s.indexOf("safari"),
        n = -1 != s.indexOf("safari");
      return !t && i && n ? 1 : 0
    }
  };
  w.scrollbar = S,
    w.goTop = t,
    w.isFixed = i,
    w.banVideo = n,
    w.select = e,
    w.modal = o,
    w.videomodal = a,
    w.mCustomScrollbarInit = l,
    w.numRoll = c,
    w.shareInit = r,
    w.asideNav = d,
    w.phNavInit = h,
    w.animateCss = _,
    w.checkViewport = f,
    w.reloadCss = p,
    w.stopSlick = v,
    w.yxtop = u,
    w.yxlenis = y,
    w.lenisStop = m,
    w.lenisStart = g,
    w.isIE = b,
    w.concatHref = k,
    $.fn.slickAuto = x,
    s.ys = w
})(window);

全部代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值