简单的堆叠卡片样式jQuery轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 简单的堆叠卡片样式jQuery轮播图插件
简单的堆叠卡片样式jQuery轮播图插件
分享:

    插件介绍

    MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件。该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果。

    浏览器兼容性

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

MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件。该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果。

使用方法

在页面中引入MxSlider.css,jquery和MxSlider.js文件。

<link rel="stylesheet" href="css/MxSlider.css">
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/MxSlider.js"></script>               
                
HTML结构

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

<div class="sliderWrapper"> 
  <!-- Slider -->
  <div class="mySlider">
    <div> 
      <img src="1.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 1
      </div>
    </div>
    <div> 
      <img src="2.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 2
      </div>
    </div>
    <div> 
      <img src="3.png" alt="">
      <div class="sliderDescription"> 
        Slide Description 3
      </div>
    </div>
  </div>
  <!-- Slider --> 
</div>                   
                 
初始化插件

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

$('.mySlider').MxSlider({
  autoPlay: true,
  dots: true,
  timeSlide: 500
}); 
                

配置参数

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

  • nav:是否显示前后导航箭头,默认为true。
  • dots::是否显示前后圆点导航按钮,默认为false。
  • timeSlide:动画的速度,默认为100毫秒。
  • autoPlay:是否自动播放,默认为false。
  • autoPlaySpeed:自动播放的速度,默认为5000毫秒。

MxSlider.js轮播图插件的github地址为:https://github.com/Maxim-us/MxSlider

网友评论