jquery幻燈片與UI顏色變化

Question

我已經搜索和搜索，試圖找到一個簡單的jQuery幻燈片或腳本，可以設置一個類取決於活動的div上的某些屬性。

一樣的鏈接，不改變圖像和用戶界面的顏色時要匹配的背景圖像 http://www.squarespace.com/#startups

能有人幫助我，或點我在正確的方向

Answer 1

我回答我自己的問題：

$(function(){ 
    $('#slider div:first-child').addClass('active'); 

    $('.arrow').on('click', function(){ 
     updateClass($(this).attr('data-dir')); 
     var itemType = $('#slider').find('div.active').data('uicolor'); 
     if (itemType == 'light') 
     { 
      $('body').removeClass("darkui"); 
      $('body').addClass("lightui"); 
     } 
     else if (itemType == 'dark') 
     { 
      $('body').removeClass("lightui"); 
      $('body').addClass("darkui"); 
     } 
     return false; 
    }); 

}); 

function updateClass (direction) 
{ 
    var current = $('#slider .active'); 

    if (direction == 'left' && current.index() > 0) 
    { 
     current.removeClass('active'); 
     current.prev().addClass('active'); 
    } 
    else if (direction == 'right' && current.index() < $('#slider div:last-child').index()) 
    { 
     current.removeClass('active'); 
     current.next().addClass('active'); 
    } 
} 

$("#slider div:first-child").addClass("active"); 
var itemType = $('#slider').find('div.active').data('uicolor'); 
if (itemType == 'light') 
{ 
    $('body').removeClass("darkui"); 
    $('body').addClass("lightui"); 
} 
else if (itemType == 'dark') 
{ 
    $('body').removeClass("lightui"); 
    $('body').addClass("darkui"); 
} 
setTimeout(autoAddClass, 7000); 

function autoAddClass(){ 
    var next = $(".active").removeClass("active").next(); 
    if(next.length) 
     $(next).addClass('active'); 
     var itemType = $('#slider').find('div.active').data('uicolor'); 
      if (itemType == 'light') 
      { 
       $('body').removeClass("darkui"); 
       $('body').addClass("lightui"); 
      } 
      else if (itemType == 'dark') 
      { 
       $('body').removeClass("lightui"); 
       $('body').addClass("darkui"); 
      } 
    else 
     $('#slider div:first-child').addClass('active'); 
    setTimeout(autoAddClass, 7000); 
}