javascript - 在 Javascript 中设置多个小图像(如轮播)

Question

我正在使用 Materialise 设计、Jquery 和 javascript。我想实现在一行中设置多个图像并自动移动到特定方向。现在我在 Materialise 设计中使用 3d 效果轮播。但它不能正常工作。当我放置 anchor 标记(放置重定向链接)时，它会卡住(有时)。

$('.carousel').carousel({
  dist: 0,
  shift: 0,
  padding: 20,
  interval: 100
});

.carousel .carousel-item {
  opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">

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


<div class="carousel">
  <a class="carousel-item" href="#one!">
    <img src="http://lorempixel.com/250/250/nature/1">
  </a>
  <a class="carousel-item" href="#two!">
    <img src="http://lorempixel.com/250/250/nature/2">
  </a>
  <a class="carousel-item" href="#three!">
    <img src="http://lorempixel.com/250/250/nature/3">
  </a>
  <a class="carousel-item" href="#four!">
    <img src="http://lorempixel.com/250/250/nature/4">
  </a>


  <a class="carousel-item" href="#five!">
    <img src="http://lorempixel.com/250/250/nature/5">
  </a>

</div>

我想实现类似的应用程序。 http://www.jqueryrain.com/?Q5dad1oS

我想显示多个小图像。但我不想使用任何插件。因为我不想增加页面的大小。

Answer 1

你是说跑马灯吗？

请引用:http://download.remysharp.com/marquee.html

有几种不同的方法可以做到这一点，通过 CSS 或 js。