Question

我让这个寻呼机正常工作：http://jquery.malsup.com/cycle/pager6.html 但是，如果我在1页上有多个幻灯片，并且我不想为寻呼机使用ID，该怎么办？但是使用类X的最近元素作为寻呼机。

可以这样做吗？

这是我目前的代码：

$(document).ready(function()
{
    $('.photoGallerySlideshowAlbum').cycle(
    {
        fx: 'fade',
        pager: '#photoGallerySlideshowPager',
        activePagerClass: 'selected',
        pagerAnchorBuilder: function(idx, slide)
        { 
            return '#photoGallerySlideshowPager li:eq(' + idx + ') a';
        },
        after: function(currentImage, nextImage, options)
        {
            var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide();
            var caption = $(captions[options.currSlide]);
            caption.show();
        }
    });
});

我现在这样做了：

$(document).ready(function()
{
    $('.photoGallerySlideshowAlbum').each(function(index, value)
    {
        var elPager = $(this).parent().find('.photoGallerySlideshowPager');

        $($(this)).cycle(
        {
            fx: 'fade',
            pager: elPager,
            activePagerClass: 'selected',
            pagerAnchorBuilder: function(idx, slide)
            { 
                return 'li:eq(' + idx + ') a';
            },
            after: function(currentImage, nextImage, options)
            {
                var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide();
                var caption = $(captions[options.currSlide]);
                caption.show();
            }
        });
    }); 
});

但我不知道如何更改pagerAnchorBuilder。我的html看起来像这样（无法更改）。

<div class="photoGallerySlideshowPager">
                    <ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
                    </ul>
                </div>

Answer 1

在jQuery循环中，它指出：

pager:         null,  // element, jQuery object, or jQuery selector string for the element to use as pager container

http://jquery.malsup.com/cycle/options.html

所以你应该能够像这样将jQuery对象传递给这个属性：

pager: $(this).closest('.nav')

jQuery循环分页器

1 个答案: