javascript - 苹果网站上的 HTML 轮播/幻灯片放映

Question

我在 apples website 上找到了这个轮播它有 3 个广播主持人，想知道我如何创造这种效果，或者是否有这样的旋转木马可用。

我做了一些研究，发现了一个类似的 stackoverflow question它链接到 slick.js，所以我想知道苹果是否使用 slick 并对其进行了自定义以执行此操作，或者他们找到了一个新的轮播来实现这种效果。

通过检查轮播，我找到了 zine-gallery-content 类，但搜索没有帮助。

有谁知道我如何制作这个旋转木马？它也是响应式的。

Answer 1

我觉得很习惯。他们在代码中将其称为“ac-gallery”。他们倾向于使用 ac-、ac-analytics 等前缀。

我会告诉你我是怎么想出来的。我检查了 slider ，正在寻找带有“画廊”、“旋转木马”、“ slider ”或类似内容的包装类或 ID。我注意到轮播包含 ID #zine-gallery。然后，我查找了他们的一个 javascript 文件，该文件看起来像大部分代码编译到的主要文件。我找到了一个名为 main.built.js 的文件。我打开此文件并搜索确实存在的 zine-gallery。然后我打开我的网络检查器，打开“源”选项卡并找到 main.built.js。然后，我单击“Pretty Print”按钮(行号和列号旁边的 {} 图标。这会格式化丑陋的 javascript，让您更轻松地阅读它。

以下内容让我相信这是习俗:

this.gallery = B.create({
    id: this.galleryId,
    el: this.wrapper,
    section: this,
    model: this.slides,
    triggerSelector: this.triggerSelector,
    trigger: {
        events: ["mouseover", "click"]
    }
})

通常一个插件会在创建过程中包含它的名字。此外，在下面定义了以下画廊方法:

C._removeActiveStates, C._animateNewStation, C._blendToNewBackgroundColor, C.activate, C.deactivate, C.animateIn, C.onRequestAnimationFrame, C.onScroll, C.onResize等