图像阵列的连续旋转

Question

是否可以找到一些 jQuery 库。用于图像阵列的连续旋转？就我而言，我有大约 30 个图像（合作伙伴徽标），我想将它们设置在一些 jquery lib 或纯 CSS 代码中，其中图像将连续旋转。图像和信息将通过ajax查询导入。愿景示例：它可能看起来像这样，或者在同一高度线上。感谢任何有关进一步调查的帮助和建议。

Answer 1

有大量用于此目的的插件。这是一个slick的例子（https://github.com/kenwheeler/slick/）。大多数转盘/滑块都可以选择连续旋转。只需谷歌搜索滑块并在初始化之前用ajax填充它即可。

请注意，SO 不是推荐平台。

$(document).ready(function() {

  $('.slider').slick({

    dots: false,

    slidesToShow: 7,

    slidesToScroll: 1,

    autoplay: true,

    autoplaySpeed: 1000,

    responsive: [

    {

      breakpoint: 1024,

      settings: {

        slidesToShow: 6,

        slidesToScroll: 6,

      }

    },

    {

      breakpoint: 600,

      settings: {

        slidesToShow: 5,

        slidesToScroll: 5

      }

    },

    {

      breakpoint: 480,

      settings: {

        slidesToShow: 4,

        slidesToScroll: 4

      }

    }

  ]

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slider">

  <div><img src="https://picsum.photos/id/10/100/100"></div>

  <div><img src="https://picsum.photos/id/20/100/100"></div>

  <div><img src="https://picsum.photos/id/30/100/100"></div>

  <div><img src="https://picsum.photos/id/40/100/100"></div>

  <div><img src="https://picsum.photos/id/50/100/100"></div>

  <div><img src="https://picsum.photos/id/60/100/100"></div>

  <div><img src="https://picsum.photos/id/70/100/100"></div>

  <div><img src="https://picsum.photos/id/80/100/100"></div>

  <div><img src="https://picsum.photos/id/90/100/100"></div>

  <div><img src="https://picsum.photos/id/100/100/100"></div>

  <div><img src="https://picsum.photos/id/110/100/100"></div>

</div>