1

我正在使用 jQuery Cycle 在同一页面上创建多个幻灯片。有些幻灯片只有一张图片。对于这些,我想隐藏下一张/上一张图片。不知道为什么这段代码不起作用,但我怀疑它正在计算所有幻灯片的所有孩子。如果是这种情况,我需要它单独计算每个幻灯片的长度。JSFiddle在这里

jQuery

if ( $('.slideshow').children().length < 1 )
    $(this).parent().find('.controls').hide();
else
$('.slideshow').each(function() {
    var cycle = $(this),
    controls = cycle.parent().find('.controls');
    cycle.cycle({
        timeout: 0,
        speed: 'fast',
        fx: 'scrollHorz',
        next: controls.find('.next'),
        prev: controls.find('.prev'),
        before: function(curr,next,opts) {
                    var s = ($(next).index() + 1) + '/' + opts.slideCount;
                    $(opts.caption).html(s)
                },
        caption: cycle.parent().find('p.caption'),
    });
});

HTML

   <div class="container">
    <ul class="slideshow">
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
    </ul>
    <div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>

<div class="container">
    <ul class="slideshow">
        <li><img alt="product" src="http://placehold.it/500x500" /></li>
    </ul>
    <div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>
4

1 回答 1

4
$(document).ready(function() {    
    $('.slideshow').each(function() {        
        if ( $(this).children().length <= 1 )
            $(this).parent().find('.controls').hide();
        else{
            var cycle = $(this);
            controls = cycle.parent().find('.controls');
            cycle.cycle({
                timeout: 0,
                speed: 'fast',
                fx: 'scrollHorz',
                next: controls.find('.next'),
                prev: controls.find('.prev'),
                before: function(curr,next,opts) {
                            var s = ($(next).index() + 1) + '/' + opts.slideCount;
                            $(opts.caption).html(s)
                        },
                caption: cycle.parent().find('p.caption'),
            });
        }
    });    
});
于 2012-04-05T06:18:06.780 回答