javascript - Jquery，使用上一个/下一个链接在幻灯片图像上添加效果

Question

我是 jquery 的新手，我正在尝试用 jquery 制作一个 slider ，这是我现在的脚本:

      $(function()
  {
    var bgCounter = 0,
    text = [
    'some html code here',
    'some html code here',
    'some html code here',
    ],
    link = [
    'LINK',
    'LINK',
    'LINK'
    ],
    backgrounds = [
    "img.jpg",
    "img.jpg",
    "img.jpg"
    ];
    function changeBackground()
    {
      bgCounter = (bgCounter+1) % backgrounds.length;
      $('#Main-screen').css('background', 'url('+backgrounds[bgCounter]+')');
      $('#Main-screen').css('background-size','cover');
      $('#example').html(text[bgCounter]);
      $('a.link').attr("href", "#"+link[bgCounter]);
      setTimeout(changeBackground,4000);
    }
    changeBackground();
  })();

这是 html/css 部分:

  #Main-screen {
      position: relative;
      width:100%;
      height: 100%;

<div id="Main-screen" style="display:inline-block;">
<a class="link" href="#"><span id="example"></span></a>

我不知道使用此脚本我是否可以在我的图像切换时添加效果(如淡入淡出)并在其上添加下一个/上一个链接。因此，如果有人有想法这样做。我真的不知道我的脚本是否可行。因此，如果这不可能，任何人都可以向我展示一个例子，这真的很棒。

对不起，我的英语不是很好。

Answer 1

尝试像这样将效果添加到背景图像更改中:

  $('#Main-screen').fadeIn().css('background', 'url('+backgrounds[bgCounter]+')');