jQuery.BgSwitcher 使用与技术文档

1. 安装指南

首先，确保您的项目中已经包含了jQuery库，且版本号为1.7.x或更高。接下来，您可以从GitHub上下载jQuery.BgSwitcher的源代码，或者通过npm等工具进行安装。

# 通过npm安装
npm install jquery-bgswitcher

将下载的文件放入您的项目目录中，并在HTML文件中引入jQuery和jQuery.BgSwitcher的JavaScript文件。

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.bgswitcher.js"></script>

2. 项目的使用说明

在HTML中，您需要一个容器来显示背景图片。

<div class="box">
  <p>这里是内容...</p>
</div>

然后，使用jQuery选择器选择这个容器，并调用.bgswitcher()方法。

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  // 其他配置项...
});

您可以自定义一些配置项，例如禁用自动切换：

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  loop: false
});

3. 项目API使用文档

配置项

以下是.bgswitcher()方法可接受的配置项：

键名	类型	默认值	描述
images	数组	[]	背景图片数组
interval	数字	5000	切换间隔（毫秒）
start	布尔	true	初始化后立即开始切换
loop	布尔	true	是否循环切换
shuffle	布尔	false	是否打乱图片顺序
effect	字符串	fade	切换效果类型
duration	数字	1000	切换效果持续时间
easing	字符串	swing	动画缓动效果

内置效果类型

• fade
• blind
• clip
• slide
• drop
• hide (无效果)

添加新的效果类型

首先，使用$.BgSwitcher.defineEffect()方法定义新效果。

$.BgSwitcher.defineEffect("extraSlide", function($el) {
  $el.animate({left: $el.width()}, this.config.duration, this.config.easing);
});

然后，在.bgswitcher()方法中指定新效果名称。

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  effect: "extraSlide"
});

调用方法

BgSwitcher支持类似于jQuery UI Widget的方法调用方式。

$(".box").bgswitcher("method name");

以下是一些可用的方法：

• start：开始切换
• stop：停止切换
• toggle：切换开始/停止状态
• reset：重置到第一个图片
• select：选择指定索引的图片
• next：切换到下一张图片
• prev：切换到前一张图片
• destroy：销毁BgSwitcher实例

例如，使用按钮选择特定图片：

var $el = $(".box").bgswitcher({
  images: ["foo.jpg", "bar.jpg", "baz.jpg"]
});

$("button").on("click", function() {
  $el.bgswitcher("select", 1); // 选择 bar.jpg
});

4. 项目安装方式

请参考上述的“安装指南”部分获取详细安装步骤。