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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 带聚焦效果的jQuery响应式图片轮播图插件
带聚焦效果的jQuery响应式图片轮播图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-11
    阅读:
麦子学院
简要教程

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

响应式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

网友评论