带Ken Burns效果的jquery轮播图插件

这是一款带Ken Burns效果的jquery轮播图插件。该轮播图在每一幅图片显示的时候，都有从大到小变化，或从左到右运动等动画效果。

使用方法

在页面中引入subtle-slideshow.css、jquery和jquery.subtle-slideshow.js文件。

<link rel="stylesheet" href="subtle-slideshow.css">
<script src="js/split.js"></script>                  
<script src="js/jquery.min.js"></script>                  
                

HTML结构

每个span标签里的class用于指定Ken Burns效果。他们可以是：

• left：从左向右。
• right：从右向左。
• up：从下向上。
• down：从上向下。
• in：从小到大。。
• out：从大到小。

<div id="slides">
  <a class="slide" href="#link01">
    <span class="animate right" style="background-image: url(your-image-01.jpg)"></span>
    <div class="static-content"><h1>Revolve Waterbottle</h1></div>
  </a>
  <a class="slide" href="#link02">
    <span class="animate in" style="background-image: url(your-image-02.jpg)"></span>
    <div class="static-content"><h1>Lunchbox</h1></div>
  </a>
  <a class="slide" href="#link03">
    <span class="animate down" style="background-image: url(your-image-03.jpg)"></span>
    <div class="static-content"><h1>Salad Shaker</h1></div>
  </a>
</div>
                

初始化插件

$('#slides').slideshow({
  randomize: true,            // Randomize the play order of the slides.
  slideDuration: 6000,        // Duration of each induvidual slide.
  fadeDuration: 1000,         // Duration of the fading transition. Should be shorter than slideDuration.
  animate: true,              // Turn css animations on or off.
  pauseOnTabBlur: true,       // Pause the slideshow when the tab is out of focus. This prevents glitches with setTimeout().
  enableLog: false,           // Enable log messages to the console. Useful for debugging.
  slideElementClass: 'slide', // This is also defined in the CSS!
  slideshowId: 'slideshow'    // This is also defined in the CSS!
});
                

该带Ken Burns效果的jquery轮播图插件的github网址为：https://github.com/stijnvc/subtle-slideshow.js