图像阵列的连续旋转[关闭]

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>