2011-10-27 55 views
0

我有這樣的HTML:如何使用jquery創建圖像幻燈片,但使用background-image屬性?

<div id="content_home_preview"> 

</div> 

而這個CSS:

#content_home_preview{ 
float: left; 
margin: 0; 
padding: 0; 
width: 940px; 
height: 469px; 
background-image: url("../Images/image1.png"); 
repeat: no-repeat; 
} 

如何創建與後面的圖像如幻燈片效果圖像2,圖像3,等等

我試圖jQuery的週期,但它的形式是這樣的:

<div id="content_home_preview"> 
    <div class="image1"></div> 
    <div class="image2"></div> 
</div> 

但我只需要腳本來屢改變background-image屬性與衰落效應...

謝謝

+0

據我所知,jQuery Cycle不適用於除塊元素之外的任何其他功能。 (我不知道是否可以在背景圖片之間進行動畫轉換。)也許您可以使用CSS定位將您的其餘內容放置在頂層,以模擬背景圖片? – Blazemonger

+0

我想過那個,但是如果可以的話,我正要避免「黑客攻擊」 –

+0

我並不確定如何爲背景圖片添加動畫,但我可能會試圖說服你使用正常的圖片標籤;真正的原因是爲什麼你想這樣做與使用背景圖像相比,屏幕閱讀器可以訪問圖像(你不能指定具有背景圖像的alt標籤),以及與你的內容相關的圖像很好ALT標籤只會改善你的搜索引擎優化。 – motoxer4533

回答