jQuery幻灯片：淡入淡出效果答案

【问题标题】：JQuery slides: fade effectjQuery幻灯片：淡入淡出效果
【发布时间】：2017-01-22 05:59:51
【问题描述】：

我正在使用您可以在此处找到的 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
    }
  }
});

【问题讨论】：

将您的代码包含在$(document).ready( function() { //code }); 中，它应该可以工作。
幻灯片有效，只有图片之间的淡入淡出效果无效
你能举一个活生生的例子吗？我知道您与文档相关联，但它们有效，无论您在做什么都无效。所以我们需要看看你的版本。

标签： javascript jquery

【解决方案1】：

我已经完成了这项工作。根据docs，您可以将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
      }
    }
  });
});

【讨论】：

【解决方案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
    }
  }
});

【讨论】：