带聚焦效果的jQuery响应式图片轮播图插件

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。