jQuery.vitrine.js是一款非常实用的响应式图片轮播旋转展示jQuery插件。该图片轮播插件就像在玻璃橱柜中展示商品一样。用户点击某一张图片之后，图片就会向屏幕中间旋转移动。该插件与旋转木马类似，非常适合用于产品展示。

使用方法

使用该图片轮播插件需要引入jQuery和jquery.vitrine.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.vitrine.js"></script>
HTML结构

该图片轮播插件的HTML结构使用嵌套<div>的HTML结构。

<div id="vitrine">
    <div data-desc="不丹"><img src="1.png"></div>
    <div data-desc="贵州"><img src="2.png"></div>
    <div data-desc="重庆"><img src="3.png"></div>
    <div data-desc="尼泊尔"><img src="4.png"></div>
    <div data-desc="四川"><img src="5.png"></div>
    <div data-desc="西藏"><img src="6.png"></div>
    <div data-desc="云南"><img src="7.png"></div>
</div>

data-desc属性是图片的标题描述属性。

初始化插件

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

$('#vitrine').vitrine({title:'图片标题',color:'#fff'});

配置参数

该图片轮播插件有以下一些可用的配置参数。

  • start：默认值：null。设置在插件初始化之后位于最中间的图片项，从0开始。如果设置为null，则将所有项目的中间项放置在中间。
  • narrow：默认值：false。设置是否使用narrow模式。narrow模式指的是统一时间内只有3个项目被显示。插件会在总的图片项目数小于5的时候自动使用narrow模式。请至少为该图片轮播插件添加3个以上的图片项目。
  • speed：默认值：400。动画的持续时间，单位毫秒。
  • loop：默认值：false。是否允许循环。
  • title：默认值：' '。设置图片展柜的标题。
  • color：默认值：'#000'。设置title和图片标题的文字颜色。