最小背景幻灯片插件 jQuery PhotoFlip

  • 源码大小:7.53KB
  • 所需积分:1积分
  • 源码编号:19JP-3097
  • 浏览次数:879次
  • 最后更新:2023年05月05日
  • 所属栏目:幻灯片
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

PhotoFlip是一个小型的jQuery背景幻灯片放映插件,通过在容器的背景图像之间无缝转换来创建平滑且可配置的幻灯片放映。

参见:

  • 10个最佳JavaScript或纯CSS背景幻灯片

如何使用它:

1.下载插件并放置主脚本照片翻转.js在jQuery之后。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="/path/to/PhotoFlip.js"></script>

2.为幻灯片放映定义一组背景图像。

  1. images = new Array;
  2. images[0] = "url('1.png')";
  3. images[1] = "url('2.png')";
  4. images[2] = "url('3.png')";
  5. images[3] = "url('4.png')";
  6. // ...

3.调用插件将放置背景幻灯片的目标容器上的函数。

  1. $("#container").PhotoFlip({
  2. // options here
  3. }, images);

4.配置平滑的交叉渐变过渡。

  1. $("#container").PhotoFlip({
  2. interval: '3000',
  3. transitionTime: '0.5s',
  4. }, images);

5.自定义背景图像的样式。

  1. $("#container").PhotoFlip({
  2. backgroundSize: 'cover',
  3. repeat: 'no-repeat',
  4. }, images);

预览截图