幻燈片背景圖片

我有被從數據庫返回的一個PHP數組，數組包含路徑，我想Ø彌補我的包裝div的背景在我的HTML圖像，我希望能夠增加一些JavaScript代碼將在數組中循環，並且設置的間隔顯示數組中的下一個圖像，這是否可能，並且是否有可能對其進行一些控制，以便用戶可以跳過，向前並停止滑動顯示。幻燈片背景圖片

來源

2010-01-20 Udders

我實際上已經應用jQuery Cycle plugin來做幾乎完全符合你的要求的事情。這是一個很棒的多功能插件。

我也拉出數組添加到頁面的圖像。該插件抓取圖像，隱藏它不需要的內容並循環瀏覽它們。

更新只是注意到你希望用戶能夠控制來回移動。 Cycle也是這樣做的。看看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>

來源

2010-01-20 20:52:19 jay

解決tranparent /阻@ sico87如果你想它讓我知道以後需要一些例子。 – jay 2010-01-20 20:52:57

這將如何實現背景圖像？這對圖像庫來說似乎是一個很好的解決方案，您是否將它實現爲背景圖像？ – Udders 2010-01-21 09:42:04

@ sico87，添加了一些示例代碼，並就如何旋轉背景圖像的想法（這真的沒有背景圖片......這是全能工作）。 – jay 2010-01-21 13:52:31

我們使用jQuery橫向滑動插件 - HTTP：// www.gruppo4.com/~tobia /cross-slide.shtml icauto.com

我們有一些黑客，以插件對IE6 +

來源

2010-01-21 07:24:48

幻燈片背景圖片

回答

相關問題