Question

我在我的网站上遇到了jquery和bxslider的问题，我已经绞尽脑汁待了一段时间，但似乎找不到任何方法让它按照我喜欢的方式工作，

我正在使用bxslider构建一个滑块，基本上我希望当前幻灯片有一个“活动”类或不透明度为1，而我希望滑块上的所有其他图像的不透明度为0.7。

我的页面上有一个潜在的'无限'幻灯片，这就是我似乎遇到问题的地方。（它在wordpress循环中使用，每个帖子都被编码以将图像从帖子拉到滑块中）

你可以看到我到目前为止所获得的内容：http://jsfiddle.net/bu5cd/

    $(document).ready(function(){
$('.bxslider').bxSlider({
        onSlideBefore: function (currentSlideNumber, totalSlideQty,        currentSlideHtmlObject) {
    $('img.attachment-thumbnail-size').removeClass('active');
    $('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
     }
});
    });

你可以看到它在某种程度上适用于第一个滑块，但它没有传递给第二个滑块。

欢呼的家伙们，我已经绞尽脑汁待了好几个小时！我愿意使用另一个滑块，如果这有助于实现所需的结果，那么bxslider似乎没有太多的文档。

Answer 1

你的第一个问题是你的回调函数中的参数都是错误的。第一个参数是指向当前幻灯片的jquery对象。然后，您在整个页面上选择“第n个”img，而不是与当前幻灯片相关。使用此当前幻灯片jquery对象，您只能找到适当的图像而不是影响所有滑块。试试这个：

$(document).ready(function () {
    $('.bxslider').bxSlider({
        onSlideBefore: function ($el) {

            /*  remove the class from all images of this slider only  */
            $el.closest(".bxslider")
                .find('img.attachment-thumbnail-size')
                .removeClass('active');

            /*  add the class to the image within the current slide */
            $el.find('img.attachment-thumbnail-size')
                .addClass('active');
        }
    });
});

http://jsfiddle.net/bu5cd/3/

Jquery - 一次向多个元素添加类？

1 个答案: