jquery 图像滑块_使用jQuery的项目组合图像导航

jquery 图像滑块

View demo 查看演示 Download Source 下载源

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

今天，我们要使用jQuery创建作品集图像导航模板。 想法是以组合方式显示一些投资组合项目，并以所有2D方式(水平/垂直)浏览它们。 可以使用当前图像下方的箭头或小方框进行导航。

The beautiful photography is by Angelo González. Check out his Flickr photostream or follow him on Twitter @ag2r.

美丽的摄影是安吉洛·冈萨雷斯(AngeloGonzález)拍摄的。 查看他的Flickr照片流或在Twitter @ ag2r上关注他。

标记 (The Markup)

For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside:

对于标记，我们将在其中具有背景，箭头和图库容器的主包装div中：

<div id="portfolio">
	<div id="background"></div>		
	<div class="arrows">
		<a href="#" class="up">Up</a>
		<a href="#" class="down">Down</a>
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
	<div class="gallery">
		<div class="inside">
			<div class="item">
				<div><img src="images/1.jpg" alt="image1" /></div>
				<div><img src="images/2.jpg" alt="image2" /></div>
				<div><img src="images/3.jpg" alt="image3" /></div>
			</div>
			<div class="item">
				<div><img src="images/4.jpg" alt="image4" /></div>
				<div><img src="images/5.jpg" alt="image5" /></div>
			</div>
			<div class="item">
				<div><img src="images/6.jpg" alt="image6" /></div>
				<div><img src="images/7.jpg" alt="image7" /></div>
				...
			</div>
			<div class="item">
				...
			</div>
		</div>
	</div>
</div>

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

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

CSS (The CSS)

First, let’s define the style for the main container. We’ll set it’s position to be fixed and center it in the screen with the 50% and negative margin technique:

首先，让我们定义主容器的样式。 我们将其位置设置为固定，并使用50％和负边距技术将其在屏幕中居中：

#portfolio {
	position:fixed;
	top:50%;
	left:50%;
	z-index:1;
	width:1000px;
	height:500px;
	margin:-250px 0 0 -500px;
}

The background will also be fixed and we’ll add a background image that creates the spotlight effect:

背景也将被固定，我们将添加一个创建聚光灯效果的背景图像：

#background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	background:url(../images/bg.png) no-repeat center;
}

The gallery will be positioned absolutely, just like it’s inner div:

画廊将绝对定位，就像它的内部div一样：

#portfolio .gallery,
#portfolio .gallery .inside {
	position:absolute;
	top:0;
	left:0;
}

The gallery will also occupy all the space of the portfolio:

画廊还将占据作品集的所有空间：

#portfolio .gallery {
	width:100%;
	height:100%;
	overflow:hidden;
}

We’ll fix the z-index of the inside div in order for keeping the stacking right:

我们将修复内部div的z-index，以保持正确的堆叠：

#portfolio .gallery .inside {
	z-index:1;
}

Now, we’ll style the arrows. First, we’ll define the common style:

现在，我们将为箭头设置样式。 首先，我们将定义通用样式：

#portfolio .arrows a {
	position:absolute;
	z-index:3;
	width:32px;
	height:32px;
	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
	outline:none;
	text-indent:-9999px;
}

And then we’ll style all the single arrows:

然后，我们将为所有单个箭头设置样式：

#portfolio .arrows .prev,
#portfolio .arrows .up {
	display:none;
}

#portfolio .arrows .up,
#portfolio .arrows .down {
	left:50%;
	margin-left:-16px;
}

#portfolio .arrows .prev,
#portfolio .arrows .next {
	top:180px;
}

#portfolio .arrows .up {
	background-position:0 -64px;
	top:20px;
}

#portfolio .arrows .down {
	background-position:0 -96px;
	bottom:120px;
}

#portfolio .arrows .prev {
	background-position:0 -32px;
	left:60px;
}

#portfolio .arrows .next {
	background-position:0 0;
	right:60px;
}

#portfolio .arrows .up:hover {
	background-position:-32px -64px;
}

#portfolio .arrows .down:hover {
	background-position:-32px -96px;
}

#portfolio .arrows .next:hover {
	background-position:-32px 0;
}

#portfolio .arrows .prev:hover {
	background-position:-32px -32px;
}

The item divs, which are our wrappers for the image sets will be styled as follows:

div项(这是我们用于图像集的包装器)的样式如下：

#portfolio .item {
	position:absolute;
	top:0;
	width:1000px;
	height:400px;
}

Each image wrapper will be positioned absolutely, too and occupy all the space:

每个图像包装器也将绝对定位，并占据所有空间：

#portfolio .item div {
	position:absolute;
	left:0;
	width:100%;
	height:100%;
}

Each image will be centered. Keep in mind that in our example we are using images with a width of 600px, so if you use different ones, you need to adapt this:

每个图像将居中。 请记住，在我们的示例中，我们使用的宽度为600像素的图像，因此，如果使用其他图像，则需要对此进行调整：

#portfolio .item div img {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-300px;
}

Let’s style the little boxes navigation which will be added dynamically:

让我们设置将动态添加的小盒子导航的样式：

#portfolio .paths {
	position:absolute;
	bottom:60px;
	left:50%;
	margin-left:-30px;
	z-index:4;
}

#portfolio .paths div {
	position:absolute;
	top:0;
}

#portfolio .paths a {
	background:#333;
	display:block;
	position:absolute;
	left:0;
	outline:none;
}

#portfolio .paths a:hover,
#portfolio .paths .active {
	background:#fff;
}

And that’s all the style!

这就是所有样式！

JavaScript (The JavaScript)

In this part, we’ll show you how to initialize the plugin. In the head of our HTML file, we will include the following three scripts:

在这一部分中，我们将向您展示如何初始化插件。 在HTML文件的开头，我们将包含以下三个脚本：

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

The first one is the jQuery library, the second one is our plugin and the third one is the initialization script:

第一个是jQuery库，第二个是我们的插件，第三个是初始化脚本：

var o = {
	init: function(){
		this.portfolio.init();
	},
	portfolio: {
		data: {
		},
		init: function(){
			$('#portfolio').portfolio(o.portfolio.data);
		}
	}
}

$(function(){ o.init(); });

The default option values for our plugin are the following:

我们插件的默认选项值如下：

$('#portfolio').portfolio({
	image: {
		width: 600,
		height: 400,
		margin: 20
	},
	path: {
		width: 10,
		height: 10,
		marginTop: 5,
		marginLeft: 5
	},
	animationSpeed: 400
});

The image options are the width, height and the margin between the images. The path options define the aspect of the little navigation boxes, how big they should be and how much margin they should have. Last, the animation speed can be adjusted.

图像选项是图像之间的宽度，高度和边距。 路径选项定义了小导航框的外观，应有多大以及应有多少边距。 最后，可以调整动画速度。

Stay tuned for the next tutorial!

请继续关注下一个教程！

翻译自: https://tympanus.net/codrops/2011/08/09/portfolio-image-navigation/

jquery 图像滑块