php - 幻灯片背景图像

Question

我有一个从数据库返回的 php 数组，该数组包含我想要在 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>