这是一款带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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!