Question

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

我有一组控制旋转木马的缩略图。这是我之前关于如何设置的问题的链接：

caroufredsel image thumbnail pagination in wordpress

关于如何在点击拇指时暂停它的另一个问题

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

在您点击另一个缩略图之前，所有工作都会花哨。什么都没发生。它与我认为的暂停/延迟有关。就好像我删除了超时功能一样，它会逐渐消失到被点击的每个缩略图...但不会在每次点击缩略图时暂停幻灯片显示。

$('#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;
        }

但是，唉，只是总是击中第一个条件并且没有进入其他条件，因此不会暂停。我认为这可能只是一个逻辑问题，但也许它只是我需要添加的触发器再次启动旋转木马。不知道。

Answer 1

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

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;
        });
    });

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

如何暂停CarouFredSel轮播单击缩略图

1 个答案: