简单的支持移动设备的轮播图jQuery插件

这是一款简单的支持移动设备的轮播图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                  
                

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3