简单的支持移动设备的轮播图jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简单的支持移动设备的轮播图jQuery插件。该jQuery轮播图插件采用响应式设计，支持自动轮播，圆点导航和箭头导航，以及CSS3过渡动画效果等。

使用方法

在页面引入jquery，slider.js和slider.css文件。

<link rel="stylesheet" href="css/slider.css">
<script src="js/jquery.min.js"></script>         
<script src="js/slider.js"></script>

HTML结构

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

<div class="slider-container">
  <div class="slider">
    <div class="slider__item">
      <img src="img-1.jpg" alt="">
      <span class="slider__caption">文字描述信息... </span>
    </div>
    <div class="slider__item">
      <img src="img-2.jpg" alt="">
      <span class="slider__caption">文字描述信息... </span>
    </div>
    <div class="slider__item">
      <img src="img-3.jpg" alt="">
      <span class="slider__caption">文字描述信息... </span>
    </div>
  </div>
    <div class="slider__switch slider__switch--prev" data-ikslider-dir="prev">
      <span></span>
    </div>
    <div class="slider__switch slider__switch--next" data-ikslider-dir="next">
      <span></span>
    </div>
</div>

初始化插件

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

$(".slider-container").ikSlider();

也可以在初始化时显示指定的图片：

$(".slider-container").ikSlider(3);

配置参数

该jquery轮播图插件的默认配置参数如下：

touch   : true,
controls: true,
arrows  : true,
infinite: false,
delay   : 10000, // 10s
caption : false,
speed   : 300,
cssEase : 'ease-out',
responsive: true,
autoPlay: true,
pauseOnHover: true