PhotoFlip是一个小型的jQuery背景幻灯片放映插件,通过在容器的背景图像之间无缝转换来创建平滑且可配置的幻灯片放映。
1.下载插件并放置主脚本照片翻转.js
在jQuery之后。
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/PhotoFlip.js"></script>
2.为幻灯片放映定义一组背景图像。
- images = new Array;
- images[0] = "url('1.png')";
- images[1] = "url('2.png')";
- images[2] = "url('3.png')";
- images[3] = "url('4.png')";
- // ...
3.调用插件将放置背景幻灯片的目标容器上的函数。
- $("#container").PhotoFlip({
- // options here
- }, images);
4.配置平滑的交叉渐变过渡。
- $("#container").PhotoFlip({
- interval: '3000',
- transitionTime: '0.5s',
- }, images);
5.自定义背景图像的样式。
- $("#container").PhotoFlip({
- backgroundSize: 'cover',
- repeat: 'no-repeat',
- }, images);