简单易用的jquery响应式轮播图插件ma5slider

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

    插件介绍

    ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。

    浏览器兼容性

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

ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。

使用方法

在页面中引入jquery和jqueryui,jquery.ui.touch-punch.js文件,以及ma5slider轮播图插件的相关文件。

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
 
<!-- jQuery UI mouse draggable widget -->
<script src="js/jquery-ui.min.js"></script>
 
<!-- Touch Event Support for jQuery UI -->
<script src="js/jquery.ui.touch-punch.min.js"></script>
 
<!-- MA5 Slider -->
<link href="css/ma5slider.min.css" rel="stylesheet" type="text/css">
<script src="js/ma5slider.min.js"></script>
                
HTML结构

ma5slider轮播图的基本HTML结构如下:

<body>
  <div class="ma5slider outside-navs outside-dots anim-horizontal loop-mode">
      <div class="slides">
          <a href="#slide-1"><img src="images/1.jpg" alt=""></a>
          <a href="#slide-2"><img src="images/2.jpg" alt=""></a>
          <a href="#slide-3"><img src="images/3.jpg" alt=""></a>
          <a href="#slide-4"><img src="images/4.jpg" alt=""></a>
          <a href="#slide-5"><img src="images/5.jpg" alt=""></a>
          <a href="#slide-6"><img src="images/6.jpg" alt=""></a>
      </div>
  </div>
</body>                  
                
初始化插件

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

<script>
    $(window).on('load', function () {
        $('.ma5slider').ma5slider();
    });
</script>                  
                

配置参数

你可以通过在轮播图的顶级容器上添加下面的class来自定义轮播图的外观和行为。

  • anim-horizontal:水平滚动的轮播图。
  • anim-vertical:垂直滚动的轮播图。
  • anim-fade:淡入淡出的轮播图。
  • autoplay:轮播图自动播放。
  • loop-mode:无限循环模式。
  • horizontal-navs:水平箭头导航按钮。
  • vertical-navs:垂直箭头导航按钮。
  • inside-navs:箭头导航按钮在轮播图内部。
  • outside-navs:箭头导航按钮在轮播图外部。
  • hover-navs:鼠标hover时才显示箭头导航按钮。
  • hidden-navs:隐藏箭头导航按钮。
  • horizontal-dots:水平圆点按钮。
  • bottom-dots:底部分页导航按钮。
  • inside-dots:圆点按钮在轮播图内部。
  • outside-dots:圆点按钮在轮播图外部。
  • hover-dots:鼠标hover时才显示圆点导航按钮。
  • hidden-dots:隐藏圆点导航按钮。

例如:

<div id="example..." class="ma5slider anim-horizontal top-dots outside-navs ...">                  
                
通过HTML5 data属性来控制轮播图
  • data-ma5-dot:覆盖圆点导航按钮的颜色。
  • data-ma5-dot-active:覆盖激活状态圆点导航按钮的颜色。
  • data-ma5-nav:覆盖箭头导航按钮的颜色。
  • data-ma5-anim:覆盖默认的轮播图过渡动画。

例如:

<a href="#slide-2" data-ma5-dot="#888" data-ma5-dot-active="#649100">
  <img src="2.jpg" alt="">
</a>                 
                

方法

ma5slider轮播图插件可用的方法如下:

// 跳转到第三幅图片
ma5sliderGoToSlide('#slider', 3 );

// 跳转到下一幅图片
ma5sliderGoToNext('#slider');

// 跳转到前一幅图片
ma5sliderGoToPrev('#slider');

// 跳转到第一幅图片
ma5sliderGoToFirst('#slider');

// 跳转到最后一幅图片
ma5sliderGoToLast('#slider');                  
                

ma5slider轮播图插件的github地址为:https://github.com/ma-5/ma5slider

网友评论