罗和正单双中特

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

所属分类?#22909;教?幻灯片和轮播图

 9549  109  查看评论 (0)
分享到微?#25490;?#21451;圈
X
带Ken Burns效果的jquery轮播图插件 ie兼容10

使用方法

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

<link rel="stylesheet" href="subtle-slideshow.css">
<script src="http://www.bkufgw.tw/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.subtle-slideshow.js"></script>

HTML结构

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

left:从左向右。
right:从右向左。
up:从下向上。
down:从上向下。
in:?#26377;?#21040;大。。
out:从大到小。
<div id="slides">
 <a  href="#link01">
   <span  ></span>
   <div ><h1>Revolve Waterbottle</h1></div>
 </a>
 <a  href="#link02">
   <span  ></span>
   <div ><h1>Lunchbox</h1></div>
 </a>
 <a  href="#link03">
   <span  ></span>
   <div ><h1>Salad Shaker</h1></div>
 </a>
</div>

初始化插件

$('#slides').slideshow({
 randomize: true,            // 随机化幻灯片的播放顺序。
 slideDuration: 6000,        // 每个感应幻灯片的?#20013;?#26102;间。
 fadeDuration: 1000,         // 衰落过渡的?#20013;?#26102;间。 应该比slideDuration短。
 animate: true,              // 打开或关闭css动画。
 pauseOnTabBlur: true,       // 当标签失焦时暂停幻灯片放映。 这可以防止使用setTimeout()出现毛刺。
 enableLog: false,           // 启用日志消息到控制台。 对调试很有用。
 slideElementClass: 'slide', // 这也是在CSS中定义的!
 slideshowId: 'slideshow'    // 这也是在CSS中定义的!
});
相关插件-幻灯片和轮播图

jQuery轮播图插件slide.js

基于jQuery拓展的轮播插件,使用方便简单,只用一句代码自动加载,方便交互
  幻灯片和轮播图
 39103  196

三种常见轮播

三种常见轮播(左右,上下,渐变)
  幻灯片和轮播图
 41463  200

jQuery响应式全屏轮播插件royalslider.js

全屏轮播插件可放大缩小,支持触控,移动端使用,本插件为收费插件,特意整理出来的
  幻灯片和轮播图
 31906  194

SuperSlidev2.1焦点图幻灯片tab

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
  幻灯片和轮播图
 33472  236

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复
罗和正单双中特
赌博稳赢不输的规律 重庆时时彩网址 时时彩大小单双定位计划 五分彩预测软件下载 彩王计划 彩票计划软件哪个好用? 河内1分彩每天多少期 澳洲赛车热门彩种 体彩八码组六遗漏 详解时时彩官方玩法