javascript - JQuery 幻灯片 : fade effect

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

我完成了这项工作。根据 docs ，您可以将 play 的 effect 属性设置为 string。

查看 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
      }
    }
  });
});