带Ken Burns效果jquery轮播图插件

带Ken Burns效果jquery轮播图插件

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

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

1
2
3
<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效果。他们可以是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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>

初始化插件

1
2
3
4
5
6
7
8
9
10
$('#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!
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论