jquery 视差滚动_带有jQuery的视差滑块

jquery 视差滚动

View demo 查看演示 Download Source 下载源

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

新年快乐！ 我们将从充满活力的图像滑块教程开始2011年。 当我们滑动到图像上时，我们将使用视差原理移动不同的背景，以创建漂亮的透视图。 当移动时，这将为整个滑块提供很大的深度。

The wonderful images are taken from Tetsumo’s Flickr Photo Stream: http://www.flickr.com/photos/tetsumo/

精彩的图像来自Tetsumo的Flickr Photo Stream： http ：//www.flickr.com/photos/tetsumo/

So, let’s start!

所以，让我们开始吧！

标记 (The Markup)

The HTML structure is going to consist of a main container with the class “pxs_container”. We will add a wrapper for the three different backgrounds which we will animate differently to create the parallax. The background images will have some transparency since we want to see them moving on top of each other.

HTML结构将由一个具有“ pxs_container”类的主容器组成。 我们将为三个不同的背景添加一个包装，然后对其进行不同的动画处理以创建视差。 背景图像将具有一定的透明度，因为我们希望看到它们彼此重叠。

We will also add a loading element and the two unordered lists for the full images and the thumbnails. Further, we will add the navigation elements.

我们还将为整个图像和缩略图添加一个loading元素和两个无序列表。 此外，我们将添加导航元素。

<div id="pxs_container" class="pxs_container">
	<div class="pxs_bg">
		<div class="pxs_bg1"></div>
		<div class="pxs_bg2"></div>
		<div class="pxs_bg3"></div>
	</div>
	<div class="pxs_loading">Loading images...</div>
	<div class="pxs_slider_wrapper">
		<ul class="pxs_slider">
			<li><img src="images/1.jpg" alt="First Image" /></li>
			<li><img src="images/2.jpg" alt="Second Image" /></li>
			...
		</ul>
		<div class="pxs_navigation">
			<span class="pxs_next"></span>
			<span class="pxs_prev"></span>
		</div>
		<ul class="pxs_thumbnails">
			<li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
			<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
			...
		</ul>
	</div>
</div>

Now, let’s take a look at the style.

现在，让我们看一下样式。

CSS (The CSS)

We will start with the main container. Since we will use the whole page for the width of the slider, we will set it to 100%. It will be of position relative because we will set all the element inside to