响应式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='1.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10'/>
  <img src='2.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10'/>
  <img src='3.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10'/>
  <img src='4.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10'/>
  <img src='5.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10'/>
</div>

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

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

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

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

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

$('#container').bigSlider({
  animationDuration: 200
});
打赏
下载 在线预览 积分 (-2) 吐槽 (1)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

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