最简单的响应式jQuery轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 最简单的响应式jQuery轮播图插件
最简单的响应式jQuery轮播图插件
分享:

    插件介绍

    easySlider.js是一款轻量级、简单易用的响应式jQuery轮播图插件。easySlider.js可以根据视口的大小来动态修改轮播图的尺寸。它压缩后的版本仅5K大小,简单实用。

    浏览器兼容性

    浏览器兼容性
    时间:09-07
    阅读:
简要教程

easySlider.js是一款轻量级、简单易用的响应式jQuery轮播图插件。easySlider.js可以根据视口的大小来动态修改轮播图的尺寸。它压缩后的版本仅5K大小,简单实用。

使用方法

在页面中引入jquery和easySlider.js文件,以及样式文件style.css。

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="dist/js/jquery.min.js"></script>                  
<script src="dist/js/easySlider.js"></script>                  
                
HTML结构

该轮播图的HTML结构如下:

<div id="slider">
  <ul class="slides">
    <li><img class="responsive" src="http://placehold.it/350x150"></li>
    <li><img class="responsive" src="http://placehold.it/350x150"></li>
    <li><img class="responsive" src="http://placehold.it/350x150"></li>    
  </ul>

  <ul class="controls">
    <li><img src="img/prev.png" alt="previous"></li>
    <li><img src="img/next.png" alt="next"></li>
  </ul>

  <ul class="pagination">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div>     
                
初始化插件

在页面DOM元素加载完毕之后,可以通过easySlider()方法来初始化该轮播图插件。

$(function() {
    $("#slider").easySlider({});
});
                

配置参数

easySlider.js轮播图插件的可用配置参数有:

参数 默认值 描述
slideSpeed 500 轮播图切换的过渡时间,单位毫秒。
paginationSpacing "15px" 分页圆点标记的间隙。
paginationDiameter "12px" 分页圆点的直径。
paginationPositionFromBottom "20px" 分页圆点到轮播图底部的距离。
slidesClass ".slides" 轮播图的class名称。
controlsClass ".controls" 左右控制按钮的class名称。
paginationClass ".pagination" 分页圆点导航按钮的class名称。

easySlider.js轮播图插件的github地址为:https://github.com/prose100/jQuery-slider