Question

我搜索并搜索过，试图找到一个简单的jQuery幻灯片或脚本，可以根据活动div上的某些属性设置一个类。

与链接一样，在更改Ui的图像和颜色以匹配背景图像时也会这样做 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);
}

随着ui颜色变化的Jquery幻灯片

1 个答案: