Question

我有一个非常标准的bxslider，v4.0。我有CSS在后台创建全屏效果，顶部有一个大DIV。我希望每张幻灯片都能改变DIV背景颜色，以便与幻灯片照片进行颜色匹配。

See Example 有没有办法在函数中执行此操作？

当前功能：

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'horizontal',
        auto:true,
        pager:false,
        nextSelector: '#bx-next',
        prevSelector: '#bx-prev',
        nextText: '<img src="btn_slider_next.png" />',
        prevText: '<img src="btn_slider_prev.png" />',
    });
});

Answer 1

BXSlider有一些非常广泛且记录完备的回调选项，您可以在实例化滑块时使用这些选项：

http://bxslider.com/options#onSliderLoad

你可能想要onSlideAfter，所以当你创建滑块时，它看起来像

$('.bxslider').bxSlider({
    ...
    onSlideAfter: function (elem) { ... YOUR CODE HERE ... }
});

为了更改该函数中的颜色，您可以在HTML5数据属性中包含要与每个图像关联的十六进制代码。

<img src="img1.jpg" data-color="#ff0000" />

然后使用传递给BX的onSlideAfter（这是当前幻灯片的jQuery元素）的第一个参数来获取该颜色并将其应用于背景。

function (elem) {
    $('#background-div').css('background-color', elem.data('color'));
}

BXSlider，如何根据可见幻灯片更改DIV的CSS或颜色

1 个答案: