素材牛

jQuery轮播图插件带Ken Burns效果

 所属分类:网页特效-焦点图/幻灯片,图片展示

 浏览:137次-  下载:0次-  评论:4次-  发布时间:2019-04-14
jQuery轮播图插件带Ken Burns效果兼容IE10
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:这是一款带Ken Burns效果的jquery轮播图插件。该轮播图在每一幅图片显示的时候,都有从大到小变化,或从左到右运动等动画效果。
 标签:轮播图全屏

详细介绍

使用方法

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

<link rel="stylesheet" href="subtle-slideshow.css">
<script src="http://www.sucainiu.com/themes/cdn/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:从小到大。。
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,        // 每个感应幻灯片的持续时间。
 fadeDuration: 1000,         // 衰落过渡的持续时间。 应该比slideDuration短。
 animate: true,              // 打开或关闭css动画。
 pauseOnTabBlur: true,       // 当标签失焦时暂停幻灯片放映。 这可以防止使用setTimeout()出现毛刺。
 enableLog: false,           // 启用日志消息到控制台。 对调试很有用。
 slideElementClass: 'slide', // 这也是在CSS中定义的!
 slideshowId: 'slideshow'    // 这也是在CSS中定义的!
});

文件目录结构

  • css
    • ┝ subtle-slideshow.css
    • ┝ subtle-slideshow.scss
  • img
    • ┝ 1.png
    • ┝ 2.png
    • ┝ 3.png
  • ┝ index.html
  • js
    • ┝ jquery-1.11.0.min.js
    • ┝ jquery.subtle-slideshow.js
  • unprefixed
    • ┝ index.html
    • ┝ jquery.subtle-slideshow.js
    • ┝ subtle-slideshow.css
    • ┝ subtle-slideshow.scss

讨论这个素材(4)回答他人问题或分享使用心得会奖励牛币

旅行的石头
2019年05月24日

不好看啊

回复
cthgf2005
2019年06月11日

尼玛应该能好看点,哈哈哈

回复
kaixin588
2019年07月16日

挺好 哈哈

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证