1

使用 CarouFredSel 继续我的无限问题：

我有一组控制轮播的缩略图。这是我之前关于如何设置它的问题的链接：

WordPress中的caroufredsel图像缩略图分页

还有一个关于单击拇指时如何暂停它的问题

点击 caroufredsel 时暂停轮播

我的解决方案是添加延迟。

在您单击另一个缩略图之前，一切都很好。没发生什么事。我认为这与暂停/延迟有关。就像我删除了超时功能一样，它会淡入每个单击的缩略图......但不再在每次单击缩略图时暂停幻灯片放映。

$('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {

                $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
                    setTimeout(function() {
                        $('#project-carousel').trigger('pause', true);
                    }, 1000);
                    return false;
        });
    });

总而言之，当您第一次单击任何缩略图时，这可以正常工作，随后单击任何缩略图都无济于事。就像我无法再次开始幻灯片放映一样。

我想到了一些条件语句，但我能想到的每一个都适用于每个实例，而不是来自后续点击的一个。像这样的东西：

if($(this).not(".paused")) {
       $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
       }
       else {
        $(this).addClass("paused");
       $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            setTimeout(function() {
           $('#project-carousel').trigger('pause', true);
            }, 1000);
             return false;
        }

但是，唉，这总是会达到第一个条件并且不会达到其他条件，因此不会暂停。我认为这可能只是一个逻辑问题，但也许它只是我需要添加的触发器以再次启动轮播。不知道。

4

1 回答 1

0

这是一个延迟问题。这是解决的代码：

jQuery(function(){

    $(".project-arrows").click(function() {
        $('#project-carousel').trigger('play',true);
    });

    /* Attached an unique class name to each thumbnail image */
    $('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {
            $('#project-carousel').trigger('play',true);
            $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            $('#project-carousel').trigger('stop');
            return false;
        });
    });

诀窍是使用停止而不是暂停，并在任何点击时触发播放。

于 2013-03-13T22:10:00.630 回答