jQuery响应式轮播图插件VM Carousel

 查看演示  website  立即下载

使用方法

在页面中引入jquery.vm-carousel.css，jquery和jquery.vm-carousel.js文件。

<link rel="stylesheet" href="path/to/jquery.vm-carousel.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.vm-carousel.js"></script>

 HTML结构

使用一个无序列表作为该轮播图的HTML结构。

<ul class="vmcarousel-normal">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
  <li><img src="4.jpg" alt=""></li>
  <li><img src="5.jpg" alt=""></li>
  <li><img src="6.jpg" alt=""></li>
</ul>

 初始化插件

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

$('.vmcarousel-normal').vmcarousel();

 配置参数

该jquery轮播图插件的可用配置参数如下：

$('.vmcarousel-normal').vmcarousel({
  // delay in ms
  delay: 4000,
  // transition speed
  speed: 500,
  // enabe autoplay
  autoplay: true,
  // 0 for auto calc
  items_to_show: 0, 
  // min number of items
  min_items_to_show: 2,
  // items to slide at a time
  items_to_slide: 1,
  dont_cut: true,
  // center the current image
  centered: false,
  // start item
  start_item: 0,
  start_item_centered: false,
  // infinite loop
  infinite: false,
  // callback
  changed_slide: $.noop()
});

• delay：延迟时间，单位毫秒，默认为400毫秒。
  

• speed：过渡动画的速度，单位毫秒。

• autoplay：是否自动播放。

• items_to_show：初始化时显示的图片，0表示自动计算。

• min_items_to_show：最少显示多少个项。

• centered：是否使用居中显示模式。

• infinite：是否无限循环

PREVIOUS:
NEXT:
js音乐播放器
全屏切换插件pageSwitch