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

时间:2015-12-01 10:56:31

标签: javascript jquery html carousel slick.js

我在apples website找到了这个旋转木马,里面有3个电台节目主持人,想知道我是如何制作这种效果的,或者是否有这样的旋转木马。

我做了一些研究,发现一个类似的stackoverflow question链接到slick.js,所以我想知道苹果是否使用光滑并定制它来做这个或他们发现了一个新的旋转木马,使这种效果发生。

通过检查旋转木马,我找到了班级zine-gallery-content,但搜索没有帮助。

有谁知道我怎么能制作这个旋转木马?它也很敏感。

1 个答案:

答案 0 :(得分:2)

它看起来很习惯。他们称之为'ac-gallery'在他们的代码中。他们倾向于使用ac-ac-analytics等前缀。

我会让你知道我是怎么想出来的。我检查了滑块,正在寻找一个包装类或ID,其中包含' gallery',' carousel',' slider'或类似的东西。我注意到轮播包含ID #zine-gallery。然后我查找了他们的一个javascript文件,看起来像是编译大部分代码的主文件。我找到了一个名为main.built.js的文件。我打开这个文件并搜索了zine-gallery,它确实存在。然后我打开了我的网络检查员,打开了"来源"选项卡并找到main.built.js。然后我点击了" Pretty Print"按钮(行号和列号旁边的{}图标。这格式化了uglified javascript并允许您更轻松地阅读它。

以下让我相信它的习惯:

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

通常,插件会在创建过程中包含它的名称。此外,右下方定义了以下图库方法:

C._removeActiveStatesC._animateNewStationC._blendToNewBackgroundColorC.activateC.deactivateC.animateInC.onRequestAnimationFrameC.onScrollC.onResize等等。