随机排序图片插件

Question

有谁知道我在哪里可以找到类似于这个网站的插件 https://www.invisionapp.com/enterprise ?我喜欢视频部分后的徽标如何工作。

Answer 1

这是一个 vanilla-jquery 示例实现（纯文本，但您也可以将其应用于图像）

const logoOptions = [
    "lyft",
    "invision",
    "ibm",
    "google",
    "apple",
    "tesla",
    "coke",
    "pepsi"
];

function changeLogo() {
    const logos = $(".logos").children();
    const logoNames = logos.toArray().map(i => i.attributes.getNamedItem("data-company").textContent);

    const index = Math.floor(Math.random() * logos.length);
    const logo = $(logos.get(index));

    const fLogoOptions = logoOptions.filter(i => logoNames.indexOf(i) === -1);
    const newLogo = fLogoOptions[Math.floor(Math.random() * fLogoOptions.length)];

    logo.fadeOut(1000, function () {
        logo.text(newLogo).data('company', newLogo);

        logo.fadeIn(1000, function () {
            setTimeout(changeLogo, 1000);
        });
    });
}

setTimeout(changeLogo, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="logos">
  <div data-company='lyft'>lyft</div>
  <div data-company='invision'>invision</div>
  <div data-company='ibm'>ibm</div>
  <div data-company='google'>google</div>
</div>

老实说，你甚至不需要 jQuery （它也可能会稍微清理一下）.

随机排序图片插件

Ramdom sort of image plugin

html

javascript

jquery

slider

jquery-plugins