一个轻量级但高度可定制的jQuery工具,允许您轻松创建自动旋转木马或幻灯片,可以作为网站上任何元素的背景。
有了一系列定制选项,包括动画速度、过渡延迟和图像亮度,您可以创建一个独特而动态的背景,吸引您的访客
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.可用配置。
// config(img_folder=null, max_img=null, animation_time=null, transition_time=null, brightness=null) config('assets/img', 7, 7000, 1200, 0.3)