改變幻燈片變化的身體顏色

我想改變身體上的背景顏色混合幻燈片變化的顏色，但面臨的問題是否有人可以幫助我。這是我在換幻燈片時的功能，但不知道我在做什麼錯誤。我的網站的網址是http://krakenworldwide.com/destinations/`改變幻燈片變化的身體顏色

function imgbackground() { 
     if (jQuery('.slide a').hasClass('a1')) { 
      jQuery('body').css({ 
       'background-color': '#63bcf8', 
       'background-image': 'none' 
      }); 
     } else if (jQuery('.slide a').hasClass('a2')) { 
      jQuery('body').css({ 
       'background-color': '#d7e5f2', 
       'background-image': 'none' 
      }); 
     } else if (jQuery('.slide a').hasClass('a3')) { 
      jQuery('body').css({ 
       'background-color': '#a3cff4', 
       'background-image': 'none' 
      }); 
     } else if (jQuery('.slide a').hasClass('a4')) { 
      jQuery('body').css({ 
       'background-color': '#fefefe', 
       'background-image': 'none' 
      }); 
     } else { 
      jQuery('body').css({ 
       'background-color': '#fff', 
       'background-image': 'none' 
      }); 
     } 
    } 


    window.setInterval(function() { 
     imgbackground() 
    }, 1000);

來源

2014-05-19 user3651511

請花時間正確設置代碼的格式。它會讓別人更容易閱讀，因此更有可能得到答案。 –

您是否在頁面中添加了jquery-ui庫？動畫背景顏色是不可能的，沒有jquery ui lib。 – Jai

不幸的是我沒有太多的時間，通過你的代碼進行篩選（這是所有的地方），但我也注意到一些事情可以幫助你：

您正在鏈接到2個不同版本的JQuery，在「wp-includes」文件夾中有一個鏈接到版本「... 1.10.2」的鏈接，下面是鏈接到版本「... 1.7.1」。 min.js「放在你的」wp-content「文件夾中。訂單中較低的一個將覆蓋較高的一個。
您需要在所有其他插件之前加載主JQuery庫，以便將所需的任何版本移到所有其他腳本鏈接之上。
它看起來像你的幻燈片功能正在改變每個錨標記的display，z-index，並left屬性中<div class="slides-control"...>但對每個個體錨標記類保持不變，所以你寫了上面的功能不會因爲'.slide a'工作總是有一類a1，它總是有一類a2等等。
有許多方法可以完成您正在尋找的內容，但您可以嘗試爲<div class="slides-control"...>中的每個錨標籤分配一個標識。然後根據哪個定位標記具有display:block;將顏色分配給背景。

所以，你的代碼將是這個樣子：

function imgbackground() { 
    if ($('#anchor1').css('display') == 'block') { 
     $('body').css({ 
      'background-color': '#63bcf8', 
      'background-image': 'none' 
     }); 
    } else if ($('#anchor2').css('display') == 'block') { 
     $('body').css({ 
      'background-color': '#d7e5f2', 
      'background-image': 'none' 
     }); 
    } else if ($('#anchor3').css('display') == 'block') { 
     $('body').css({ 
      'background-color': '#a3cff4', 
      'background-image': 'none' 
     }); 
    } else if ($('#anchor4').css('display') == 'block') { 
     $('body').css({ 
      'background-color': '#fefefe', 
      'background-image': 'none' 
     }); 
    } else { 
     $('body').css({ 
      'background-color': '#fff', 
      'background-image': 'none' 
     }); 
    } 
}

我還沒有看到任何地方你呼喚你的功能。

您需要可以做身體：<body onload="imgbackground()">...</body>

或者使用JQuery的。就緒（）方法：

$(document).ready(function() { 
    // your "imgbackground" function here 
}

希望有所幫助。

來源

2014-05-19 07:56:18

我將首先清理您的代碼以及鏈接到您的外部文件的順序，即''標籤。我也建議你做一些調試。我注意到你的'base.js'文件中至少有16個錯誤。只需在Chrome中打開您的頁面，然後右鍵單擊>檢查元素並使用所有選項進行操作。我遠離專家，但這就是我所做的！乾杯! –

改變幻燈片變化的身體顏色

回答

相關問題