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

これがあなたが探しているものであるかどうかはわかりません...しかし、このリンクで例はonMouseHoverを一時停止します

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

于 2013-01-30T21:08:06.177 に答える