Question

我用jquery做了一个标题，它会在一段特定时间后自动更改图像。这个工作正常，现在我想在这个标题上制作一个水平幻灯片，它将以更小的比例显示图像，其中uaser可以跳过并浏览图像。

关于如何在jquery中以简单的方式执行此操作的任何简单建议？

Answer 1

如果你想使用一个jquery插件，我建议你使用：

http://jqueryfordesigners.com/automatic-infinite-carousel/

或

http://nivo.dev7studios.com/

在这里你还有更多：

http://www.tripwiremagazine.com/2012/01/jquery-image-slider.html

祝你好运!!

Answer 2

将每个图像放在带有填充的div和浮动：左边。使用jQuery，用一个足够大的容器包装它们以适应所有它们，并且绝对位于另一个div内，位置相对，溢出隐藏和固定宽度。然后你可以随意移动容器

HTML结构：

<div id="outercontainer" style="width: 500px;overflow: hidden; position:relative;">
  <div id="innercontainer" style="width: *set with jQuery*; position:absolute;top: 0; left: 0">
    <div class="imgContainer" style="padding:20px;float:left">
      <img src="1.jpg"/>
    </div>
    <div class="imgContainer" style="padding:20px;float:left">
      <img src="2.jpg"/>
    </div>
  </div>
</div>

水平幻灯片放映

2 个答案: