用AnythingSlider滑動背景

Question

點擊「下一步」箭頭和「上一個」箭頭 - 現在背景位於＃容器元素中時，我需要滑動背景 - 但是，這不起作用 - 我試過把在UL＃滑塊元件的背景 - 但是，這並不工作要麼...

我需要的是，背景將滑塊儘可能滑塊內li ...

如何任何建議要做到這一點 ？

你可以看到這裏的項目：http://www.i-creative.dk/Slider/

THX

Answer 1

我已經建立了類似的東西你問什麼，這是一個總的疼痛。

問題是，您正在討論爲每張幻燈片放置不同的背景圖片，頁面大小。

2個選項是： 1：有一個BIG背景圖像，所有背景都水平對齊，並在更改div時爲CSS背景位置設置動畫，以保持匹配。這就是隻有一個圖像需要下載的優點，但它會很大。 問題是：如果您一次跳過多個步驟，您會看到所有其他圖像;

它要求您使用固定的寬度;

如果你想改變一張幻燈片的背景，這是一種痛苦;

1. 爲div上的下一張幻燈片預載背景，該div是container的兄弟，但具有更高的z-index。使用jquery將其從適當的一面滑過現有的背景。 這種方法的好處在於，您可以使用css使背景圖像始終佔據屏幕的全寬，或者使用更大的圖像並使其居中。看到這裏：http://cksk.com爲例。

長話短說，你不會用現成的解決方案得到這個工作，你需要把你的手弄髒。

此外，你需要花很多時間在地理優化上。

Answer 2

試試這個CSS ...

#slider { 
    width: 472px; /* divided the width of the background image by 4 (# of panels) */ 
    height: 570px; 
    list-style: none; 
    /* start background after the initial cloned panel: 472px to match panel width */ 
    background: transparent url(../images/background.png) 472px 0 repeat-x; 
} 

/* This makes sure the last cloned panel background matches the first panel */ 
ul#slider li.clone { 
    background: transparent url(../images/background.png) 0 0 repeat-x !important; 
} 

/* Make the background visible */ 
div.anythingSlider .anythingWindow { 
    overflow: visible !important; 
} 

唯一的問題是，UL的寬度是有限的，所以當你到了最後一個面板，後臺結束，但再次出現一旦你打右箭頭。