1

画像を循環させるために .cycle プラグインを使用しています。ページャーに scrollTo プラグインをセットアップしました。.click 関数でスクロールしますが、循環してもスクロールしません。サイクルごとにページャーをスクロールするにはどうすればよいですか?

        $(document).ready(init);

        function init() {
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
    // dynamically add a div to hold the slideshow's pager
    $("#allCardContainer").before('<div id="pager"></div>');

    // now to use the cycle plugin
    $("#allCardContainer").cycle({
        pause: 1,
        pager: "#pager",
        pagerAnchorBuilder: function (index) {
            return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';

        }

    });



    $(".scroll").click(function (event) {
        event.preventDefault();
        $('#allCardContainer').cycle('pause');
        $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 });
    });


}

したがって、コードは pager div を作成し、画像を循環します。2 番目の関数は、サイクルを一時停止し、ページャーを左にスクロールします。選択したページャー div が常に同じ場所にあり、常に表示されるように、そのスクロールをすべてのサイクルで起動するにはどうすればよいですか?

編集：

これを試してみると、クリックはうまく機能しますが、ページャーはサイクル中にスクロールしません。

$(document).ready(init);

function init() {
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
    // dynamically add a div to hold the slideshow's pager
    $("#allCardContainer").before('<div id="pager"></div>');

    // now to use the cycle plugin
    $("#allCardContainer").cycle({
        pause: 1,
        pager: "#pager",
        pagerAnchorBuilder: function (index) {
            return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 
        },
        before: slideScroll(false)
    });

    function slideScroll(clicked) {
        if (clicked) {
            //$('#allCardContainer').cycle('pause');
            $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -83 });
        }
        else {
            $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -20 });
            alert('sliding');
        }
    }

    $(".scroll").click(function(event){        
        slideScroll(true);
    });
}
4

1 に答える 1

0

あなたはサイクルの前のオプションであなたが望むことをするつもりです

// now to use the cycle plugin
$("#allCardContainer").cycle({
    pause: 1,
    pager: "#pager",
    pagerAnchorBuilder: function (index) {
        return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';
    },
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      // Do stuff here.
    }

});

http://jquery.malsup.com/cycle/options.html

編集：

これを行う：

$(document).ready(init);

function init() {
  var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013'];
  // dynamically add a div to hold the slideshow's pager
  $("#allCardContainer").before('<div id="pager"></div>');

  // now to use the cycle plugin
  $("#allCardContainer").cycle({
    pause: 1,
    pager: "#pager",
    pagerAnchorBuilder: function (index) {
      return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>';
    },
    before: function() {
      if( $('.activeSlide').length > 0) {
        $("#pager").scrollTo($('.activeSlide'), 1500, { axis: 'x', offset:-50 });
      }
    }
  });

  $(".scroll").click(function(event) {
    event.preventDefault();
    $('#allCardContainer').cycle('pause');
    $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 });
  });
}

http://jsfiddle.net/xFMhA/

于 2012-10-01T14:39:13.893 に答える