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

您将在循环

的之前选项中执行您想要的操作

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

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

1 个答案: