Slideshowify是一个出色的幻灯片jQuery插件，它使用硬件加速的CSS3转换来在图像之间转换时创建微妙的Ken Burns效果（平移和缩放效果）。

参见：

如何使用它:

1.在文档中加载必要的jQuery库和jQuery transit插件（用于平滑的CSS3转换和转换）。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.transit.min.js"></script>

2.下载并加载jquery.slideshowify.js查询在jQuery之后。

<script src="js/jquery.slideshowify.min.js"></script>

3.创建一个容器元素来容纳幻灯片。

<div id="demo">
</div>

4.在JSON文件中定义您的图像数据，如下所示。

// images.json
[
   {
      "src":"1.jpg",
      "w":"2000",
      "h":"1328"
   },
   {
      "src":"2.jpg",
      "w":"2000",
      "h":"1328"
   },
   {
      "src":"3.jpg",
      "w":"2000",
      "h":"1329"
   },
   // ...
]

5.在目标元素上初始化插件，并指定JSON文件的路径。

$.slideshowify({
  parentEl : '#demo',
  dataUrl  : "js/photos.json",
  // dataType: "jsonp",
});

6.您也可以在页面内的所有图像上初始化插件，以创建全屏幻灯片。

<img src="1.jpg" alt="Image 1" />
<img src="2.jpg" alt="Image 2" />
<img src="3.jpg" alt="Image 3" />
...

$("img").slideshowify();

7.配置烧伤效果。

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  fadeInSpeed: 1500,
  fadeOutSpeed: 1500,
  aniSpeedMin: 9000, 
  aniSpeedMax: 15000
});

8.确定是否对图像进行随机化。默认值：false。

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  randomize: true,
});

9.功能。

$.slideshowify({
  parentEl : '#demo',
  dataUrl: "js/photos.json",
  filterFn: function(imgs){
    // filter data
    var fixedImgs = [];
    $.each(imgs, function(i, img){
      fixedImgs.push($.extend(img.versions["9"], {id:img.id}));
    });
    return fixedImgs;
  },
  afterFadeIn : function(curImage){
    // do something
  },
  beforeFadeOut : function(curImage){
    // do something else
  }
});

预览截图

Ken Burns效果 动态幻灯片放映 Slideshowify