滚动图像幻灯片

Question

我有一份来自客户的公司徽标列表，他们希望在网站的某个地方显示这些徽标。有 31 个徽标，无论我如何设计它们，都会产生一些丑陋的图像。然后我的计划是将图像调整为统一的高度，让它们一个接一个地在页面上缓慢滚动，并在序列完成后循环到开头。我在想我应该用所有图像的总宽度创建一个 div 并将它与一个 div 并排复制。然后，第一个 div 将在滚出页面后销毁，并在第二个 div 之后以蛙跳效果再次创建。我只是在寻找一些关于如何创建它的技巧。也许某个地方已经存在一个插件？

Answer 1

有很多可用的滑块。但我会推荐 BX Slider。请确保在应用 BXSlider 之前调整图像大小。

$(document).ready(function(){
  $('.bxslider').bxSlider({
    minSlides: 4,
    maxSlides: 4,
    slideWidth: 100,
    slideMargin: 10
  });
});

.bxslider img {width: 100px; height: 100px;}

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />

<ul class="bxslider">
  <li><img src="http://lorempixel.com/400/200?1" /></li>
  <li><img src="http://lorempixel.com/200/200?1" /></li>
  <li><img src="http://lorempixel.com/400/400?1" /></li>
  <li><img src="http://lorempixel.com/200/400?1" /></li>
  <li><img src="http://lorempixel.com/400/200?2" /></li>
  <li><img src="http://lorempixel.com/200/200?2" /></li>
  <li><img src="http://lorempixel.com/400/400?2" /></li>
  <li><img src="http://lorempixel.com/200/400?2" /></li>
  <li><img src="http://lorempixel.com/400/200?3" /></li>
  <li><img src="http://lorempixel.com/200/200?3" /></li>
  <li><img src="http://lorempixel.com/400/400?3" /></li>
  <li><img src="http://lorempixel.com/200/400?3" /></li>
</ul>

Answer 2

无需使用 JavaScript，谷歌搜索向我们展示了 Smashing Magazine 在 CSS 中发表了一篇关于如何这样做的文章：http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow 可以在 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider

找到演示

滚动图像幻灯片

Scrolling image slideshow

javascript

css

scripting

jquery

slideshow