最小背景旋转木马/幻灯片插件 jQuery实时背景

  • 源码大小:748.55KB
  • 所需积分:1积分
  • 源码编号:19JP-3172
  • 浏览次数:547次
  • 最后更新:2023年05月14日
  • 所属栏目:幻灯片
本站默认解压密码:19jp.com 或 19jp_com

简介

一个轻量级但高度可定制的jQuery工具,允许您轻松创建自动旋转木马或幻灯片,可以作为网站上任何元素的背景。

有了一系列定制选项,包括动画速度、过渡延迟和图像亮度,您可以创建一个独特而动态的背景,吸引您的访客

参见:

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

如何使用它:

1.为背景幻灯片创建一个DIV容器。

<div id="live-bg">
  <!-- Create two DIVs to switch between images -->
  <div class="background" id="background1"></div>
  <div class="background" id="background2"></div>
  <!-- Create a mirror DIV to configure the brightness of the images -->
  <div id="mirror"></div>
</div>

2.下载并加载jQuery Live后台插件的HTML文件。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Live Background -->
<link rel="stylesheet" href="/path/to/live-bg.css">
<script src="/path/to/live-bg.js"></script>

3.初始化并激活Live Background插件。

$(function(){
  // use default configuration
  config();
  // start live background
  livebackground();
})

4.用bg-01.jpg、bg-02.jpg、bg-03.jpg等格式命名背景图像,并将其保存在/assets/img文件夹中。查看下面的配置部分,了解如何在需要时修改映像文件夹的详细信息。

5.可用配置。

  • img_文件夹:图像文件夹
  • 最大值(_img):最大图像数
  • 动画时间(_T):切换到下一个图像之前需要等待的时间
  • 过渡时间:动画速度
  • 亮度:图像的不透明度。从0到1。
// config(img_folder=null, max_img=null, animation_time=null, transition_time=null, brightness=null)
config('assets/img', 7, 7000, 1200, 0.3)

预览截图