1

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

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

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

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

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

4

2 回答 2

4

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

我在函数中添加了延迟：

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

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

于 2013-01-28T17:31:22.417 回答
0

不确定这是否是您要查找的内容...但是在此链接中，示例 pause onMouseHover

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

于 2013-01-30T21:08:06.177 回答