Question

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 2

不需要使用JavaScript，Googling的一些内容向我们展示了Smashing Magazine在CSS中发表了一篇关于如何做到这一点的文章：http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow 可以在http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider

找到演示

滚动图像幻灯片

2 个答案: