1

jquery ツールのスクロール可能なプラグインに問題があります: http://jquerytools.org/documentation/scrollable/index.html

また、スクロール可能な自動スクロール プラグインを使用: http://jquerytools.org/documentation/scrollable/autoscroll.html

リンクがクリックされたときにスライドショーを一時停止しようとしています。これが私のhtmlマークアップです:

<a id="pauseSlideshow" href="javascript:;">Pause Slideshow</a>

これが私のJavaScriptです：

<script type="text/javascript">

    var scrollableApi;

    $(document).ready(function () {

        // Initialize the slideshow 
        scrollableApi = $('#slideshow')
            .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 })
            .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" })
            .autoscroll({ interval: 3000, autopause: true, api: true });

        // Pause the slideshow when the link is clicked
        $("#pauseSlideshow").click(function () {  
            alert("should pause slideshow");
            scrollableApi.pause();
            alert("no error");
         });

    });
</script>

両方のアラートが表示されていますが、スライドショーはまだ自動スクロールしています。Chrome インスペクタにコンソール エラーはありません。

jQuery ツールのドキュメントには、これらの API メソッドの使用方法の例が欠けていることがわかりました。だから多分私はそれらを間違って使用していますか？

4

1 に答える 1

2

自動スクロールコンストラクターが正しく連鎖していないように見えるため、作成しているスクロール可能なインスタンスを返していません。

初期化後に API への参照を取得するために、コードを少し変更してみてください。

var scrollableApi;

$(document).ready(function () {

    // Initialize the slideshow 
    $('#slideshow')
        .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 })
        .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" })
        .autoscroll({ interval: 1000, autopause: true, api: true });

    // get a reference to the API
    scrollableApi = $('#slideshow').data('scrollable');

    // Pause the slideshow when the link is clicked
    $("#pauseSlideshow").click(function () {
        scrollableApi.pause();
    });

});
于 2013-01-15T12:54:38.800 に答える