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 回答