在本文中，我们将探讨如何使用 jquery 库设置基本滑块。我们将使用bxSlider 库，它建立在 jQuery 之上，并提供了许多用于设置滑块的配置选项。
如今，图片滑块已成为必备功能——一张图片胜过千言万语！
一旦您决定要设置一个基本滑块，下一个问题就是创建滑块的确切过程是什么。当然，首要的要求是采集高质量、高分辨率的图像。
接下来，您知道您将使用 html 和一些奇特的 javascript 内容来创建图像滑块。网络上有很多可用的库，可让您以不同的方式创建滑块。我们将使用开源 bxSlider 库。
bxSlider 库支持响应性，因此使用该库构建的滑块将适应任何设备。我相信您知道如今构建一个响应和适应不同设备的网站是多么重要。因此，当您选择第三方库来构建滑块时，响应能力是一项必备功能。
在下一节中，我们将开始探索 bxSlider 库的基础知识和设置过程。更进一步，我们将构建一个真实世界的示例，该示例将演示 bxSlider 库的使用。最后，我们将了解 bxSlider 库支持的一些重要参数，这些参数允许您根据您的要求自定义滑块。
什么是 bxSlider？
如果您正在寻找基于 jQuery 的内容滑块，bxSlider 是最好和最简单的库之一，它允许您非常轻松地创建内容和图像滑块。
让我们快速浏览一下它提供的功能：
它对所有类型的设备都有充分的响应和适应性。
它支持不同的显示模式，如水平、垂直和淡入淡出模式。我们将在本文后面看到更多相关内容。
幻灯片内容可以是任何内容：图像、视频或 HTML 文本。
它支持所有流行的浏览器。
它提供了多种配置选项，允许您根据自定义要求自定义滑块。
最后但同样重要的是，它很容易实现，我们将在下一节中看到。
现在，让我们看一下bxSlider库的安装过程。在本文中，我将使用 CDN URL 加载必要的 JavaScript 和 css 文件，但当然您始终可以继续从官方bxSlider GitHub存储库下载或克隆这些文件。
包含 javaScript 和 CSS 文件
您需要做的第一件事是在您的 HTML 文件中包含必要的 JavaScript 和 CSS 文件，如以下代码片段所示。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"><script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
您可以将上述代码包含在<head>HTML 文档的标记中。如您所见，我已经从 CDN URL 加载了必要的文件。如果您为项目下载了这些文件，则需要为每个文件提供正确的路径。
设置滑块内容
在本节中，我们将了解如何在 HTML 文件中设置滑块内容。
让我们看看下面的片段。
<div class="slider"> <h2>Slide One</h2> <h2>Slide Two</h2> <h2>Slide Three</h2></div>
在上面的示例中，我们设置了三个幻灯片，以便在我们初始化滑块时在它们之间旋转。在上面的代码片段中需要注意的重要一点是主要<div>元素中提供的 CSS 类。目前，我们已将其用作sliderCSS 类，因此我们将在设置 bxSlider 期间使用该值。
当然，您可以使用任何内容，而不仅仅是文本。当我们查看如何构建完整的图像滑块时，我们将在下一节中回到这一点。现在，您只需要记下我们在主要<div>元素中提供的 CSS 类。
仅使用原始 HTML，我们的滑块看起来不会很好，因此我们将添加一些额外的 CSS，用于指定标题的背景、字体大小和文本对齐方式。
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
width: 600px;
}
div.slider h2 {
text-align: center;
background: orange;
font-size: 6rem;
line-height: 3;
margin: 0;
}初始化 bxSlider
到目前为止，我们已经包含了必要的库文件并为我们的滑块设置了 HTML 内容。剩下的唯一事情就是初始化 bxSlider 以将我们的静态 HTML 内容转换为一个看起来很花哨的旋转滑块！
让我们看一下初始化滑块的代码片段。
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>它是 JavaScript 代码，因此您也可以将其放在<head>标签中。或者您可以将它放在 HTML 文件底部标记的正上方</body>，这样 JavaScript 就会在页面的其余部分完成加载后运行。如果您更喜欢将它放在<head>标记中，则需要确保在加载必要的 JavaScript 和 CSS 文件后放置它。
如您所见，我们使用CSS 类来初始化我们的滑块。 slider
通过这三个简单的步骤，您已经使用基于 jQuery 的 bxSlider 库构建了一个响应式滑块！这是一个 CodePen 演示，显示了滑块的运行情况：
See the Pen Simple Text Slider in jQuery by Envato Tuts+ (@tutsplus) on CodePen.
在下一节中，我们将扩展迄今为止讨论的内容，并尝试使用 bxSlider 库提供的各种配置选项来构建滑块。
建立一个真实世界的例子
在上一节中，我们讨论了如何使用 bxSlider 库设置基本滑块。在本节中，我们将通过一个真实示例演示如何为您的网站构建旋转图像滑块。
在您的文档根目录下，创建一个包含以下代码片段的 HTML 文件。
<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<div class="slider">
<div><img src="https://picsum.photos/id/10/600/400" title="A Beautiful Landscape"></div>
<div><img src="https://picsum.photos/id/20/600/400" title="Stationery on Table"></div>
<div><img src="https://picsum.photos/id/30/600/400" title="A Coffee Mug"></div>
</div>
<script>
$('.slider').bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 600,
mode: 'fade',
captions: true,
speed: 1000
});
</script>
</body>
</html>通过该设置，您的幻灯片应该如下所示：
See the Pen Simple Image Slider in jQuery by Envato Tuts+ (@tutsplus) on CodePen.
上面示例中的代码看起来应该很熟悉。这与我们已经讨论过的非常相似。唯一不同的是，我们使用 bxSlider 库支持的一些配置选项初始化了我们的滑块。让我们仔细看看那个片段。
$('.slider').bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 600,
mode: 'fade',
captions: true,
speed: 1000
});autoControls参数_
该autoControls参数添加允许用户开始和停止幻灯片放映的控件。默认情况下，它被设置为false，所以如果你想显示控件，你需要true明确地设置它。
auto参数_
该auto参数允许您在页面加载时自动启动幻灯片。默认情况下，它设置为false。
pager参数_
该pager参数将寻呼机添加到幻灯片。
slideWidth参数_
该slideWidth参数允许您设置幻灯片的宽度。如果您正在使用horizontal幻灯片放映选项，则此参数是必须的。
mode参数_
该mode参数允许您配置幻灯片之间的转换类型。您可以从三个选项中进行选择—horizontal、vertical和fade。在上面的示例中，我们使用了该fade选项，因此当从一张幻灯片切换到另一张幻灯片时，您会看到淡入淡出的效果。
captions参数_
captions如果要为每张幻灯片显示标题，则使用该参数。标题是从图像元素的title属性中获取的。如您所见，我们title为示例中的所有图像提供了一个属性。
speed参数_
该speed参数允许您配置幻灯片过渡持续时间，它以毫秒为单位设置。在我们的示例中，我们将其设置为1000，因此幻灯片将每秒旋转一次。
bxSlider 有大量其他配置选项——您可以在官方 bxSlider 选项文档中了解它们。继续探索 bxSlider 库中可用的不同选项。它还通过 JavaScript 回调方法提供了许多自定义可能性。
结论
今天，我们讨论了如何使用 jQuery 库设置基本滑块。出于演示目的，我们选择了构建在 jQuery 库之上的 bxSlider 库。我们还使用 bxSlider 库提供的各种配置选项构建了一个真实示例。
- 包含 javaScript 和 CSS 文件
- 设置滑块内容
- 初始化 bxSlider
- autoControls参数_
- auto参数_
- pager参数_
- slideWidth参数_
- mode参数_
- captions参数_
- speed参数_
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
发表评论