Question

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

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

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

<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>

如何让旋转木马进入点击的缩略图，然后暂停？

Answer 1

这可能不是最好的方法，但这是我到目前为止在缩略图更改后停止旋转木马的方式：

我在函数中添加了延迟：

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

这允许转换完成，然后暂停滚动。

Answer 2

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

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

点击caroufredsel暂停旋转木马

2 个答案: