jquery-bigSlider是一款带聚焦效果的jQuery响应式图片轮播图插件。该轮播图插件可以制作当前图片高亮和图片放大两种聚焦效果。

使用方法

在页面中引入jquery和jquery-bigSlider.js文件。

HTML结构

使用一个容器来包裹一组需要制作轮播图效果的图片。

初始化插件

在页面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。