将 jQuery Cycle 插件与 ScrollTo 插件一起使用

Question

我正在使用 .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 });
    });


}

因此代码会创建寻呼机 div，然后循环浏览图像。第二个函数暂停循环并将寻呼机向左滚动。如何使该滚动在每个循环中触发，以便我选择的寻呼机 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);
    });
}

Answer 1

你将在循环的before选项中做你想做的事

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