JQuery 幻灯片:淡入淡出效果

Question

我正在使用 JQuery 幻灯片，你可以在这里找到 http://www.slidesjs.com/examples/standard/

但是淡入淡出效果不适用于游戏，仅适用于导航！

<script>
    $(function() {
      $('#slides').slidesjs({
        width: 800,
        height: 400,
        play: {
          active: true,
          auto: true,
          interval: 3500,
          effect: {
          fade: {
            speed: 1000
          }
        }
          //swap: true
        },
        navigation: {
          effect: "fade"
        },
        pagination: {
          effect: "fade"
        },
        effect: {
          fade: {
            speed: 1000
          }
        }
      });
    });
  </script>

我还尝试从代码的第一部分中删除速度，以便在初始播放时获得淡入淡出。

$('#slides').slidesjs({
  width: 800,
  height: 400,
  play: {
    active: true,
    auto: true,
    interval: 3500,
    effect: "fade"
    //swap: true
  },
  navigation: {
    effect: "fade"
  },
  pagination: {
    effect: "fade"
  },
  effect: {
    fade: {
      speed: 1000
    }
  }
});

Answer 1

我已经完成了这项工作。 根据文档，您可以将play的 effect 属性设置为字符串。

查看 jsfiddle： https://jsfiddle.net/cale_b/5ac1cebL/

$(function() {
  $('#slides').slidesjs({
    width: 800,
    height: 400,
    play: {
      active: true,
      auto: true,
      interval: 500,
      // within the play property, effect should be a string, i.e. "fade"
      effect: "fade"
    },
    navigation: {
      effect: "fade"
    },
    pagination: {
      effect: "fade"
    },
    effect: {
      fade: {
        speed: 1000
      }
    }
  });
});

Answer 2

从代码的第一部分删除速度将使淡入淡出在初始播放时起作用。

$('#slides').slidesjs({
  width: 800,
  height: 400,
  play: {
    active: true,
    auto: true,
    interval: 3500,
    effect: "fade"
    //swap: true
  },
  navigation: {
    effect: "fade"
  },
  pagination: {
    effect: "fade"
  },
  effect: {
    fade: {
      speed: 1000
    }
  }
});