1

我在我的网站上遇到了 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 似乎没有太多的文档。

4

1 回答 1

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/

于 2013-10-14T21:27:48.540 回答