fotorama

1.1、fotorama简介

fotorama是一款响应式的jQuery图轮图插件，支持缩略图播放、全屏查看、支持视频、图片、HTML内容、支持图片延迟加载、支持缩略图显示位置定义、支持自动播放以及循环播放、支持左右方向按键播放。

fotorama官网：http://fotorama.io

fotorama在GitHub上的网址：https://github.com/artpolikarpov/fotorama

1.2、下载fotorama

通过bower下载：

bower install fotorama --save

下载完成后，目录结构如下：

.
├── README.md
├── bower.json
├── example.html
├── fotorama.css
├── fotorama.js
├── fotorama.png
└── fotorama@2x.png

1.3、引入fotorama

<link href="/bower_components/fotorama/fotorama.css" rel="stylesheet" />
<script src="/bower_components/fotorama/fotorama.js"></script>

1.4、使用fotorama

一般的，使用如下配置足够了：

<!DOCTYPE html>
<html>
<head>
    <link href="/bower_components/fotorama/fotorama.css" rel="stylesheet" />
</head>
<body>
    <div class="fotorama" data-width="500" data-autoplay="3000" data-loop="true" data-keyboard="true">
        <img src="/images/1.png">
        <img src="/images/2.png">
        <img src="/images/3.png">
        <img src="/images/4.png">
    </div>
    <script src="/bower_components/fotorama/fotorama.js"></script>
</body>
</html>

1.5、定制fotorama

fotorama的实现是通过扩展HTML元素的属性配合javascript进行工作的。

定制fotorama主要是给设置了fotorama的class的元素添加以data-开头的一些属性实现的。