1200字范文 > jquery 滑块_如何使用jQuery创建动画图库（滑块工具）

jquery 滑块_如何使用jQuery创建动画图库（滑块工具）

时间：2019-07-07 17:46:37

jquery 滑块

Slider kit tutorial. Today we continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos). By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.

滑块工具包教程。今天，我们继续概述可用的照相馆。下一个画廊将是Slider Kit 。这是免费的jQuery照片库。该画廊有4个不同的视图(标准，带字幕，垂直和简约)。重要说明–它与所有浏览器兼容(即使在IE6中也可以使用)，并且重量非常轻(库的压缩版本少于8kb)。您可以使用鼠标，鼠标滚轮甚至键盘浏览图像。结果–我们将拥有一个带有直观界面的漂亮画廊。今天，我将向您介绍如何实现此图片库(您甚至可以在任何CMS中将其用作会员照片的图片库)。默认情况下，此库期望已准备好的html数据(带有所有图像和缩略图)。因此，可能很难在其中加载动态内容(不同成员的不同照片)。没关系，当使用jQuery完成页面加载时，我们将强制加载必要的图像(我们将使用$ .get函数以动态方式加载图像)。我们将使用PHP生成必要图像和缩略图的列表。

Ok, lets start, and lets check prepared demos and download ready package:

好的，让我们开始，然后检查准备好的演示并下载准备好的软件包：

现场演示1

现场演示2

现场演示3

Lets start coding !

让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。这是我们示例的源代码：

index.html (index.html)

You can notice, that currently we have empty UL inside ‘sliderkit-nav’. We will load its units on ‘jQuery(window).load’ event. Also, by default ‘sliderkit-panels’ should contain ready set of images too, we will load it after too. So currently we just prepared skeleton – interface elements (panels and buttons).

您会注意到，当前在“ sliderkit-nav”中有空的UL。我们将在'jQuery(window).load'事件中加载其单元。另外，默认情况下，“ sliderkit-panels”也应包含一组可用的图像，我们也将在以后加载它。因此，当前我们仅准备骨架–界面元素(面板和按钮)。

Now, make attention to class of our main gallery ‘photosgallery-std’. This class will determinate gallery view. For first example we using Standard view (‘photosgallery-std’, where ‘std’ – Standard shortly). Here are another possible classes: ‘photosgallery-captions’ (will display custom captions at images), ‘photosgallery-vertical’ (will display captions and make gallery vertically) and ‘photosgallery-minimalistic’ (minimalistic set, nothing). Another point, no need generate navigation buttons in case if you going to use ‘minimalistic’, they don`t will display anyway :)

现在，请注意我们主画廊“ photosgallery-std”的类。此类将确定画廊的视野。对于第一个示例，我们使用“标准”视图(“ photosgallery-std”，其中“ std” –简称“标准”)。这是另一种可能的类别：“ photosgallery-captions”(将在图像上显示自定义标题)，“ photosgallery-vertical”(将显示标题并垂直放置图库)和“ photosgallery-minimalistic”(minimistic set，不显示任何内容)。还有一点，如果您要使用“极简主义”，则无需生成导航按钮，它们无论如何都不会显示:)

In our package you will find ‘index2.html’ and also ‘index3.html’. This is just different gallery views.

在我们的软件包中，您会找到“ index2.html”和“ index3.html”。这只是不同的画廊视图。

步骤2. CSS (Step 2. CSS)

Here are used CSS files:

以下是使用CSS文件：

css / main.css (css/main.css)

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

As usual – our main file for demo layout – very easy. But of course, pur new gallery have own css files:

像往常一样-我们用于演示布局的主文件-非常容易。但是，当然，pur new gallery具有自己的css文件：

css / sliderkit-core.css，css / sliderkit-demos-ie6.css，css / sliderkit-demos-ie7.css，css / sliderkit-demos-ie8.css和css / sliderkit-demos.css (css/sliderkit-core.css, css/sliderkit-demos-ie6.css, css/sliderkit-demos-ie7.css, css/sliderkit-demos-ie8.css and css/sliderkit-demos.css)

All these files you will able to find in package (they are large enough to include them in the article)

您可以在软件包中找到所有这些文件(它们足够大，可以在文章中包含它们)

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

js / main.js (js/main.js)

//jQuery(window).load() must be used instead of jQuery(document).ready() because of Webkit compatibilityjQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,panelbtnshover:true,auto:true,circular:true,navscrollatend:true});});});

So, when page loaded, I start loading extra info (about using thumbs and images) from feed.php using jQuery. After, appending received info (JSON) to the pending objects. And then – perform initialization of our gallery with necessary params. First demo will using mousewheel, keyboard, will display 4 elements in navigation, have auto scrolling. Full list of possible option I will put in end of article. Next file

因此，在页面加载后，我开始使用jQuery从feed.php加载额外的信息(关于使用拇指和图像)。之后，将接收到的信息(JSON)附加到挂起的对象。然后–用必要的参数对我们的画廊进行初始化。第一个演示将使用鼠标滚轮，键盘，将在导航中显示4个元素，并具有自动滚动功能。我将在文章末尾列出所有可能的选项。下一个档案

js / main2.js (js/main2.js)

have similar structure, but another set of properties:

具有相似的结构，但具有另一组属性：

jQuery(window).load(function() {$.get('feed.php', function(data){$('.sliderkit-nav-clip ul').append(data.thumbs);$('.sliderkit-panels').append(data.images);jQuery('#sliderkit_galery').sliderkit({mousewheel:true,keyboard:true,shownavitems:4,auto:true,circular:true,navscrollatend:true,verticalnav:true,navclipcenter:true,navitemshover:true,panelfxspeed: 2000});});});

And here are code for our third sample:

这是我们第三个示例的代码：

js / main3.js (js/main3.js)

js / jquery-1.5.2.min.js，js / jquery.easing.1.3.min.js，js / jquery.mousewheel.min.js和js / jquery.sliderkit.1.5.1.pack.js (js/jquery-1.5.2.min.js, js/jquery.easing.1.3.min.js, js/jquery.mousewheel.min.js and js/jquery.sliderkit.1.5.1.pack.js)

This is list of all another used JS files (jquery library with gallery). Available in our package.

这是所有其他使用的JS文件(带有库的jQuery库)的列表。在我们的包装中可用。

步骤4. PHP (Step 4. PHP)

Here are source code of our generator of images:

这是我们图像生成器的源代码：

feed.php (feed.php)

<?$sThumbTemplate = <<<HTML<li><a href="#" rel="nofollow" title="{title}"><img src="{fileurl}" alt="{title}" /></a></li>HTML;$sImageTemplate = <<<HTML<div class="sliderkit-panel"><img src="{fileurl}" alt="{title}" /><div class="sliderkit-panel-textbox"><div class="sliderkit-panel-text"><h4>{title}</h4><p>{description}</p></div><div class="sliderkit-panel-overlay"></div></div></div>HTML;$sThumbs = $sImages = '';$sFolder = 'data_images/';$aUnits = array('pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4','pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8','pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10');foreach ($aUnits as $sFileName => $sTitle) {$sThumbs .= strtr($sThumbTemplate, array('{fileurl}' => $sFolder . 't_' . $sFileName, '{title}' => $sTitle));$sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle, '{description}' => $sTitle . ' photo description here'));}header("Content-Type: application/json");require_once('Services_JSON.php');$oJson = new Services_JSON();echo $oJson->encode(array('thumbs' => $sThumbs, 'images' => $sImages));?>

Firstly, I defined 2 templates which going to use for generation of necessary info about using images and for thumbs and for images. Also will use JSON to be able to send both strings in one time (inside array). All our custom images located in ‘data_images’ directory. All thumbs – have prefix ‘t_’. Easy enough :)

首先，我定义了2个模板，这些模板将用于生成有关使用图像，拇指和图像的必要信息。也将使用JSON一次发送两个字符串(在数组内部)。我们所有的自定义图像都位于“ data_images”目录中。所有的大拇指–都带有前缀“ t_”。很简单：)