使用CSS Sprites獲得'幻燈片'元素？

在網頁上有一個廣告塊（幻燈片約3-4張圖片）。圖像不從數據庫加載或類似的東西 - 它們是靜態的。圖像應該改變自己。使用CSS Sprites獲得'幻燈片'元素？

我有2個想法，這樣做：

通過new Image()預加載圖像JS。並通過改變src屬性
加入這個圖像轉換成1個雪碧和改變圖像背景位置

什麼方法更快，更好的開關？

P.S.我以第二種方式看到消極的一面，即如果需要更改或添加圖片 - 整個精靈應該重新制作。

2011-05-13 Larry Cinnabar

Sprites對於許多較小的圖像來說是有利的，以節省http請求的數量，因爲它有一些開銷。如果你打算顯示大的JPG/PNG，那麼你應該考慮到，如果用戶處於精靈模式，用戶將不得不預先下載所有的圖像，如果他們被分割，他們將能夠看到你的第一張圖片在後臺加載其他的。

來源

2011-05-13 20:11:24 JaredMcAteer

。精靈不適合更換廣告。將使用js預加載和顯示圖像 – 2011-05-13 20:16:01

我會選擇第二種方式和像http://css.spritegen.com/這樣的網站來爲我做精靈。

來源

2011-05-13 20:09:35 thinklinux

選項2更適合不經常更改的內容，例如導航元素。如果這些變化經常發生，我會說選擇1，因爲你提到的缺點。

編輯：

事實上，你可以使用/創建一個像器讀取某個目錄中的所有圖像文件，並自動旋轉它們。這可能會使最簡單的維護。

來源

2011-05-13 20:09:59 ThatMatthew

這不是導航元素，這是一些較大的元素（約200×500的圖片）。所以如果它大概有10張圖片，精靈的普通2000x5000大小是多少？ – 2011-05-13 20:11:57

對於尺寸較大的圖片，我會將它們分開，並用JS預加載它們。所以選擇1。您可以在其他人加載時顯示第一張圖片，而不是等待加載一張巨型圖片。我明白，Yeap， – ThatMatthew 2011-05-13 20:15:18

正如您在附言中所建議的，選項2對於維護而言較差。使用精靈來處理不經常改變的事物（即設計元素），特別是對於包含在單個圖像中效率更高的小元素（如按鈕和圖標）更容易。

如果您使用jQuery，有幾個插件可以很好地處理圖像轉換。一，我會建議在組合jquery Cycle與Easing plugin

來源

2011-05-13 20:12:19 melkamo

如果您已經在網站上加入JavaScript庫，如jQuery，您可以使用一個流行的插件，像jQuery Cycle輕鬆做到這一點。

作爲一個好處，你會得到易於維護的標記，並且不必[必然]擔心預加載圖像或處理複雜的CSS Sprites。另外，在幻燈片中添加更多圖像只是將更多的<img />標籤添加到HTML中。

標記的

工作示例可以看到下面：

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <title>jQuery Cycle Basic Demo</title> 

    <style type="text/css"> 
     #slideshow { height: 200px; width: 200px; overflow: hidden; } 
    </style> 
</head> 

<body> 

<div id="slideshow"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" alt="" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" alt="" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" alt="" /> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script> 
    $('#slideshow').cycle({ 
     next: '#next', 
     prev: '#prev', 
     speed: 750, 
     timeout: 3000 
    }); 
</script> 

</body> 
</html>

來源

2011-05-13 20:39:01 rjb

使用CSS Sprites獲得'幻燈片'元素？

回答

相關問題