幻灯片/轮播
带Ken Burns效果轮播图jQuery插件
PetitQ
这是一款带 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!
});
Github 网址：https://github.com/stijnvc/subtle-slideshow.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
