继"使用jQuery/CSS使用分页创建自己的Content-Slider"教程的继续，今天，我们将通过" Sliders"系列中的新文章学习一些引人注目的内容。
本教程说明了如何创建jQuery缩略图滑块，并简要介绍了基本jQuery函数，这些函数可为元素动态添加样式。

什么是缩略图视图？为什么需要它？

按照Thumbnail的定义，Thumbnail是任何事物的小表示；在我们的例子中，它是一个图像项。
因此，能够查看这些缩略图使我们能够导航到更相关的幻灯片。

在我们的滑块中，我们将使用调整大小后的图像，将这些基于文本的简单分页索引替换为图像的这些缩略图。
这使我们的滑块更具表现力和效果。
我们还可以基于此缩略图概念创建一个弹出式图库。

前提条件

本文假定读者具有有关什么是网页，HTML基本标签，很少CSS属性和JavaScript知识的基本知识。
您可以访问www.w3schools.com上的这些主题。

下一个标题" Foundation Stones"中介绍了本文中使用的基本jQuery函数。
那些熟悉这些知识的人可以直接从"实现缩略图照片滑块"部分开始。

基础石

让我们清除一些概念，这些概念可能对读者来说是新的。
从...开始

• HTML5的" data- *"属性" data- *"是HTML5中新引入的自定义全局属性，可与任何HTML元素一起使用，以将自定义数据嵌入到任何元素中。
  它使用以下语法；
  它可以用于提供更吸引人的用户体验，还可以避免使用Ajax和后端数据查询。
  例如;
  因此，在javascript代码中，我们可以使用下面说明的jQuerydata()方法单独访问这些元素。

• CSS3特定于供应商的前缀(VSP)"供应商"是浏览器制造商，他们定义了其浏览器的每个CSS属性的响应。
  当这些属性是新属性时，可能所有浏览器都不支持它们(因为它们的实现尚未完成！)。
  那些完成实现的制造商使用特定于供应商的前缀来测试其浏览器的属性兼容性。
  简而言之，为了避免以后出现浏览器兼容性问题，我们应该对某些新CSS属性使用VSP，直到这些属性成为W3C标准(即(大多数浏览器支持它们时)。
  它们的语法是–'-'+供应商特定标识符+'-'+有意义的名称。

有不同的VSP，例如-webkit-(用于Safari和chrome)，-moz-(用于Firefox)，-o-(用于Opera)，-ms-(用于Internet Explorer)，-khtml-(用于Konqueror浏览器)。

• jQuery Methodsdata()方法此方法设置/获取一组匹配HTML元素中第一个元素的data属性值(HTML5中的新增功能)。

• 它存储与匹配元素关联的数据。

• 它可以检索由data()方法设置的值，也可以从HTML5的data- *属性获取的值。
  语法用于设置数据：-[.data(key，value)或者.data(obj)]这里的键可以是任何有效的标识符。
  值可以是任何类型的值，即。
  数字，字符串，键值对数组或者任何键值对对象类型的数据。

• 获取数据的语法：-[.data(key)]" key"是数据属性的名称。
  例如。
  在"数据国家/地区"中，国家/地区指定了数据属性的键。
  对于上述设置方法，可以使用以下方法提取值。

使用HTML5 data- *属性的示例HTML代码将是：-<div data-role =" page" data-last-value =" 43" data-hidden =" true" data-options ='{" name"：" John" }'> </div>相应JavaScript代码为：

• addClass()方法此方法动态地将指定的类添加到匹配的元素集。

• 请注意，它不会检查类的冗余，而只是追加到现有的一组类中。

• 它可用于动态更改任何HTML元素的样式。

• 通常与下面介绍的removeClass()方法结合使用。

添加类的语法：-[.addClass(className)或者.addClass(function)]

• 这里的"函数"可以是任何返回类的函数。

• 它接受当前元素的"索引"和该元素上当前类的"字符串"。

例如;

<element data-*="string-value">

• removeClass()方法此方法从所有Matched元素中删除所有作为参数传递给此方法的匹配类。

• 如果未指定任何参数，则将删除所有类。
  要小心！！

• 常与addClass()方法结合使用。

删除类的语法：-[[.removeClass(className)或者.removeClass(function)]

这里的"函数"可以是任何返回类的函数。

例如;

<li data-index="1"><img src='images/one.jpg'></li>
<li data-index="2"><img src='images/two.jpg'></li>
<li data-index="3"><img src='images/three.jpg'></li>

• toggleClass()方法它从一组Matched元素中切换(添加或者删除)类。

• " remove()then add()"方法的不错选择。

切换类的语法：-[.toggleClass(className)或者.toggleClass(className，switch)]

这里的" className"是指指定的类，可选的" switch"是一个布尔参数，用于指定从匹配元素集中添加(true)还是移除(false)该类。

例如;

初始HTML代码为：

border:2px solid rgb(6, 61, 92);
/*border-radius*/
-webkit-border-radius:5px 5px 10px 10px;
-moz-border-radius:5px 5px 10px 10px;
border-radius:5px 5px 10px 10px;

应用后，$(" div.tumble")。
toggleClass(" bounce");我们得到

$( "body" ).data( "country", "San Franceco" );

$( "body" ).data( "result", { sub: "Maths", score: 70 } );

$( "body" ).data( { arr: [ 1, 2, 3 ] } ); //Passing object as parameter to data() method.

再次申请后，$(" div.tumble")。
toggleClass(" bounce");我们得到

$( "body" ).data( "country" ); //San Franceco

$( "body" ).data(); //Retrieve all data-attribute values.

实施缩略图照片滑块

现在有了一些基本的背景JavaScript方法和HTML，我们可以继续进行滑块实现了。
只需遵循以下准则

• 建立目录结构让我们在根目录中的文件夹之间组织不同的资源。
  " ThumbnailPhotoSlider"是我们的根文件夹，其中包含带有其他子文件夹HTML文件。

• " scripts"文件夹包含Javascript库，例如JQuery和其他一些脚本文件。

• " styles"文件夹包含定义不同HTML标签样式CSS文件。

• "图像"文件夹包含两组图像，其中" bigimg"用于存储滑块图像，" thumbimg"用于存储调整大小的较小图像。

• 创建图像滑块的布局滑块的布局如图使用jQuery/CSS创建带有分页的内容滑块中的图所示。

• 了解分页样式了解分页控件的布局以及添加更多图像时会发生什么情况非常重要？我们的设计通过流畅的表示自动处理这种情况，即当缩略图水平溢出滑块区域时将其软件包中间使用'text-align'CSS属性(请参见CSS代码)。
  分页的布局如下所示；
  " js"中jQuery"原型函数"的解释：–那些遵循滑块布局的人现在可以尝试从我们的上一教程中了解jQuery中的原型函数。
  在了解了原型功能(转换和setCurrentPos)之后，让我们从Thumbnail Photo Slider的实现开始。

• Thumbnail Photo Slider的实现(代码)如果您在以前的教程中已经了解了分页控件的布局，那么很容易理解我们如何使用图像的Thumbnail视图转换相同的分页，而不是在'thumbnailSliderScript中动态创建分页。
  js"文件，我们将在HTML代码中添加图像项列表，然后从JS文件中，为每个此类图像项动态分配一个名为" pgno"的"数据"属性。
  文件中，我们使用两种方法分别称为removeClass()和toggleClass()，以动态更改当前分页图像CSS属性并保留其他缩略图。
  滑块的对象。
  观察每个幻灯片内容如何被列为无序列表元素。
  两个文件thumbnailStyle.css和thumbnailSliderScript.js包含用于控制滑块运动，方向以及为Pagination缩略图设置样式的样式和方法。
  您还需要引用JQuery库，即https://code.jquery.com/jquery-2.1.0.js，您可以将其下载并保存在" scripts"文件夹中。
  所有这些文件的代码如下所示。
  ThumbnailSlider.html
  thumbnailStyle.css
thumbnailSliderScript.js
  源代码在任何需要的地方都有注释。
  如有特殊疑问，您可以通过注释直接问我。

jQuery缩略图滑动器输出

注意：如果您使用的是Chrome浏览器并想调试脚本，则可以按[F12]键并单击"控制台"选项卡，单击按钮即可查看"当前"计数器的变化情况。

您可以通过访问下面的演示页面来查看此滑块的运行情况。

• 带有缩略图演示的jQuery图像滑块