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。