Ken Burns的nivo滑块效果

nny*_*yby 5 javascript jquery nivo-slider

是否有人设置了nivo滑块来平移每个图像(又名Ken Burns效果)?我正在尝试实施它,这有点棘手!

nny*_*yby 4

事实上,我的实施工作已经开始工作了!

我有一个平移功能循环..像这样:

function ken_burns_loop(el) {
  $(el)
    .animate({
      'background-position-x': '40%',
      'background-position-y': '60%'
    }, 8000, 'linear')
    .animate({
      'background-position-x': '30%',
      'background-position-y': '40%'
    }, 8000, 'linear')
    .animate({
      'background-position-x': '70%',
      'background-position-y': '70%'
    }, 8000, 'linear', function() { ken_burns_loop(el); });
}
Run Code Online (Sandbox Code Playgroud)

我正在初始化 nivo 滑块,如下所示:

$('#welcome-slider').nivoSlider({
  effect: 'fade',
  slices: 1,
  directionNav: false,
  afterChange: function() {
    $('#welcome-slider, .nivo-slice').stop(true);
    ken_burns_loop('#welcome-slider, .nivo-slice');
  }
});
ken_burns_loop('#welcome-slider, .nivo-slice');
Run Code Online (Sandbox Code Playgroud)

我仍在解决定位方面的一些问题。