点击 caroufredsel 时暂停轮播答案

【问题标题】：pause carousel on click caroufredsel点击 caroufredsel 时暂停轮播
【发布时间】：2013-01-05 03:46:42
【问题描述】：

我有一个旋转木马和一组拇指。轮播设置为在页面加载时自动滚动。但是，我想在单击缩略图时暂停轮播。

我试图在缩略图的点击事件上实现这一点，然后使用触发器滑动到点击的拇指，然后暂停。

问题是，使用以下代码，它会暂停轮播，但不会将轮播图像更改为单击的图像。如果我删除暂停触发器，轮播将变为单击的拇指。

<script>
$(function(){
      /* 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( 'slideTo', [i, 0, true] );
            $('#project-carousel').trigger('pause', true);
            return false;
        });
    }); 

    /* Highlight the first item on first load */
    $('#thumbs a.itm0').addClass( 'selected' );

      //slideshow
 projectCarousel = $("#project-carousel").carouFredSel({
        responsive:true,
        circular:true,
        infinite:true,
        width:983,
        height:534,
        scroll:{
            fx:'crossfade',
            duration:1000,
            onBefore: function() {
                /* Everytime the main slideshow changes, it check to 
                    make sure thumbnail and page are displayed correctly */
                /* Get the current position */
                var pos = $(this).triggerHandler( 'currentPosition' );

                /* Reset and select the current thumbnail item */
                $('#thumbs a').removeClass( 'selected' );
                $('#thumbs a.itm'+pos).addClass( 'selected' );
                /* Move the thumbnail to the right page */
                //var page = Math.floor( pos / 8 );
                //$('#thumbs').trigger( 'slideToPage', page );
            }
        },
        auto: {
          play:true,
        },
        items:{
            height:winHeight,
            visible:1,
            width:1000
        },
        prev:$("#left"),
        next:$("#right"),
    });

   /* Carousel for the thumbnails */
    $('#thumbs').carouFredSel({
        width:680,
        height:50,
        direction: 'left',
        circular: false,
        items: 9,
        infinite: false,
        align: false,
        auto: false,
        prev: '#prev',
        next: '#next'
    });

});
</script>

如何让轮播转到点击的缩略图，然后暂停？

【问题讨论】：

标签： jquery image wordpress carousel caroufredsel

【解决方案1】：

这可能不是最好的方法，但这是我迄今为止在缩略图更改后停止轮播的方法：

我在函数中添加了延迟：

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

这允许过渡完成，然后暂停滚动。

【讨论】：

【解决方案2】：

不确定这是否是您要找的... 但在此链接上，示例暂停 onMouseHover

http://caroufredsel.dev7studios.com/examples/continuously-scrolling.php

【讨论】：