Question

您好 - 我正在使用下面的代码（不是我的）来淡化/淡出图像，但我想通过幻灯片效果替换淡入淡出效果（类似于我们在滑块插件中看到的）。我尝试用("slide", { direction: "left" }, 1000);替换淡入淡出效果，并提出了下面的代码，但语法不正确。我怎么能让它工作？非常感谢

FADE-IN FADE-OU的原始代码

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block').fadeOut(300, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this).fadeIn(300);

  });
}

带有幻灯片效果但未正常工作的修改后的代码

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block'). ("slide", { direction: "left" }, 1000);
 (, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this). ("slide", { direction: "left" }, 1000);

  });
}

Answer 1

如果你正在使用jQuery UI，你可以这样做：

$('.block').show("slide", function() {
    // Do what do you want
});

来源：http://api.jqueryui.com/slide-effect/

旋转木马/滑块 - 通过滑动效果替换淡入效果

1 个答案: