响应式jQuery图像聚焦效果 – bigslider

响应式jQuery图像聚焦效果 - bigslider

bigslider是一个简单的,轻量级的,响应式图片旋转木马/滑块插件。具有突出当前图片的效果,非常漂亮。

使用方法

1.在HTML页面底部添加最新的jQuery库文件和bigslider插件js文件

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery-bigSlider.js"></script>

2.将要呈现的图像插入到容器元素中

<div id='container'>
  <img src='http://static.zzyzan.com/qiniu/8349/image/f3ccdd27d2000e3f9255a7e3e2c48800.jpg'/>
  <img src='http://static.zzyzan.com/qiniu/8349/image/156005c5baf40ff51a327f1c34f2975b.jpg'/>
  <img src='http://static.zzyzan.com/qiniu/8349/image/799bad5a3b514f096e69bbc4a7896cd9.jpg'/>
  <img src='http://static.zzyzan.com/qiniu/8349/image/d0096ec6c83575373e3a21d129ff8fef.jpg'/>
  <img src='http://static.zzyzan.com/qiniu/8349/image/032b2cc936860b03048302d991c3498f.jpg'/>
</div>

3.在容器元素上调用bigslider函数初始化旋转木马

$('#container').bigSlider();

4.将默认焦点效果改为”enlarge”

$('#container').bigSlider({
  focusType: 'enlarge'
});

5.重写每个图像之间默认的延迟毫秒数

$('#container').bigSlider({
  animationDuration: 200
});
下载 在线预览 积分 (-2) 吐槽 (2)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/banner/8349.html

- 评论

  • 加载中,请稍候…
我要吐槽