jquery-bigSlider是一款带聚焦效果的jQuery响应式图片轮播图插件。该轮播图插件可以制作当前图片高亮和图片放大两种聚焦效果。
使用方法
在页面中引入jquery和jquery-bigSlider.js文件。
<script src="jquery.min.js" type="text/javascript"></script><script src="jquery-bigSlider.js" type="text/javascript"></script> |
HTML结构
使用一个容器来包裹一组需要制作轮播图效果的图片。
<div id='container'> <img src='images/1.jpg'/> <img src='images/2.jpg'/> <img src='images/3.jpg'/> <img src='images/4.jpg'/> <img src='images/5.jpg'/> <img src='images/6.jpg'/> <img src='images/7.jpg'/> <img src='images/8.jpg'/></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过bigSlider()方法来初始化该图片轮播图插件。
$('#container').bigSlider(); |
上面的初始化方法默认是生成高亮的聚焦效果。如果要制作当前聚焦图片放大的效果，可以通过配置参数focusType来实现。
$('#container').bigSlider({ focusType: 'enlarge'}); |
另外可以通过animationDuration参数来覆盖默认的动画延迟时间。
$('#container').bigSlider({ focusType: 'enlarge', animationDuration: 200}); |
jquery-bigSlider轮播图插件的github地址为：https://github.com/shendykurnia/jquery-bigSlider。
