简体   繁体   English

jQuery 循环:多张幻灯片,统计单个孩子

[英]jQuery Cycle: Multiple slide shows, count individual children

I'm using jQuery Cycle to create several slideshows on the same page.我正在使用 jQuery Cycle 在同一页面上创建多个幻灯片。 Some of the slideshows only have one image.一些幻灯片只有一张图片。 For these, I would like to hide the next/prev image.对于这些,我想隐藏下一张/上一张图片。 Not sure why this code isn't working, but I suspect it is counting all the children of all the slideshows.不知道为什么这段代码不起作用,但我怀疑它正在计算所有幻灯片的所有孩子。 If this is the case, I need it to calculate each slideshow length individually.如果是这种情况,我需要它来单独计算每个幻灯片的长度。 JSFiddle here JSFiddle 在这里

jQuery 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 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>
$(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'),
            });
        }
    });    
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM