切換體類基於使用循環2

我沒有這個工作的代碼，我不能確定在哪裏甚至開始。所以提前道歉。

我已經在互聯網尋找解決方案，但這感覺就像它可能非常簡單（而且我過於複雜的事情），或者它有點專業。

現狀：我使用Cycle2爲我選擇的滑塊（寧可堅持與 - 將很難讓我去另一個滑塊，TBH）。每張幻燈片將有一個特定的「顏色」類，還有一個「滑」類

我需要：我需要改變基礎上，主動類的顏色在<body>類。

思想：所以我沒有命名約定然而，對於顏色的類，但我的想法是它可以像.col-[name]是[名]是黃色，紅色等，所以當滑塊的活動類是col-yellow，它將此類添加到<body>，因此我可以向背景添加背景顏色/圖像（無論我想要的CSS）。

然後，一旦活動幻燈片發生變化，並且碰巧將其主體類別更改爲像col-red，則<body>匹配。

我希望這是有道理的，並且是一些在Stack Overflow領域出色的人可以幫助我。

感謝您花時間閱讀本文！

來源

2013-06-01 Kate

不久前我回答了一個類似的問題。

DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/3/

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
var bg = $(incomingSlideEl).find('img').css('backgroundColor'); 
$('body').css('background', bg); 
});

希望這有助於

[編輯]我已經編輯的代碼所以現在相同的類分配給被分配給活動幻燈片

主體DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/4/

只是爲了解釋我做了什麼 - 正如你在上面的代碼中看到的，我創建了一個var稱爲bg。這var是活動幻燈片的CSS背景顏色。然後我將該var分配到body標籤的背景。正如你所要求的，你想要一個班級變化，而不僅僅是一個風格變化。鑑於此，我簡單地更改了代碼，以便找到attrclass而不是CSS背景顏色。

瓦爾段之前：

var bg = $(incomingSlideEl).find('img').css('backgroundColor'); 
    $('body').css('background', bg);

瓦爾片段後：

var bg = $(incomingSlideEl).find('img').attr('class'); 
$('body').attr('class', bg);

來源

2013-06-01 10:21:22 Vector

任何機會，你可以重寫這個所以它不是基於滑塊的圖像的背景顏色？我希望有一個類（如我原來的文章中所描述的），或者甚至是數據屬性？我試着重新寫下你發佈的內容，我想我只是在屠殺它：D – Kate

嗨凱特，我已經編輯了我的答案，希望它有幫助 – Vector

仍然在通過這個工作。我承諾一旦完全實施（在業餘時間爲客戶開展項目），請選擇答案。沒有忘記你！：D – Kate

切換體類基於使用循環2

回答

相關問題