随机排序的图像插件

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 （它也可能会对其进行一些清理）。