Question

我有一个从数据库返回的php数组，该数组包含我想要的图像路径o在我的HTML中构成我的包装div的背景，我希望能够添加一些将循环的javascript这个阵列和一个设定的间隔显示了阵列中的下一个图像，这是可能的，并且可以对它进行一些控制，这样用户就可以跳过，前进并停止滑动。

Answer 1

我实际上已经应用了jQuery Cycle plugin几乎完全按照你的要求去做。这是一个伟大的多功能插件。

我也是从数组中提取图像以添加到页面中。该插件抓取图像，隐藏它不需要的东西并循环通过它们。

更新刚刚注意到您希望用户可以控制来回移动。循环也是如此。看看pager example。

回复：背景图片评论

你只需要有点创意。我不确定一个会淡化背景图片的jQuery插件。我不确定是否可能（如果是我喜欢看的话）。我所做的是绝对定位一个固定大小的元素作为你的容器，匹配你的背景图像的大小并保持循环元素（它们位于相对的内部）。通过在另一个元素的顶部添加另一个绝对定位元素来添加页面内容。

样式：

#cycle, #content {
  position:absolute;
  top:0;
  left:50%; 
  width:800px;
  height:600px;
  margin-left:-400px; //middle of page
  z-index:1;
}

#content {
  z-index:100;
}

使用Javascript：

$('#cycle') 
.after('<div id="nav">') //needs some position styling
.cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});

HTML：

<div id="cycle">
  <img src="path/to/image1.jpg" />
  <img src="path/to/image2.jpg" />
</div>
<div id="content">Hello World!</div>

Answer 2

我们在icauto.com网站上使用jQuery交叉幻灯片插件 - http：// www.gruppo4.com/~tobia/cross-slide.shtml

我们有一些黑客来插件来解决IE6 +上的透明/不透明度

幻灯片背景图像

2 个答案: