ye321片库_jQuery的简约幻灯片库

最新推荐文章于 2022-03-31 19:30:11 发布

culiao9310

最新推荐文章于 2022-03-31 19:30:11 发布

阅读量2.1w

点赞数

文章标签： css html less css3 bbs

原文链接：https://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/

版权

本教程将教你如何构建一个简单的jQuery幻灯片库，包括全屏图像展示、缩略图导航和暂停/播放功能。幻灯片库设计简洁，易于网站集成。

摘要由CSDN通过智能技术生成

ye321片库

View demo 查看演示 Download Source 下载源

In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

在今天的教程中，我们将创建一个简单而美丽的幻灯片库，可以轻松地将其集成到您的网站中。想法是要有一个包含我们幻灯片放映的容器，以及用于查看缩略图网格，暂停幻灯片放映以及浏览图片的选项。缩略图网格将从顶部滑出，并允许用户浏览一组缩略图。

So, let’s start!

所以，让我们开始吧！

标记 (The Markup)

The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs):

主要HTML结构将由主要的幻灯片包装器组成，其中包含一个用于显示全视图图像的容器(msg_wrapper)和一个用于缩略图的容器(msg_thumbs)：

<div id="msg_slideshow" class="msg_slideshow">
	<div id="msg_wrapper" class="msg_wrapper"></div>
	<div id="msg_controls" class="msg_controls">
		<a href="#" id="msg_grid" class="msg_grid"></a>
		<a href="#" id="msg_prev" class="msg_prev"></a>
		<a href="#" id="msg_pause_play" class="msg_pause"></a>
		<a href="#" id="msg_next" class="msg_next"></a>
	</div>
	<div id="msg_thumbs" class="msg_thumbs">
		<div class="msg_thumb_wrapper">
			<a href="#">
				<img src="images/thumbs/1.jpg" alt="images/1.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/2.jpg" alt="images/2.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/3.jpg" alt="images/3.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/4.jpg" alt="images/4.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/5.jpg" alt="images/5.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/6.jpg" alt="images/6.jpg"/>
			</a>
		</div>
		<div class="msg_thumb_wrapper" style="display:none;">
			<a href="#">
				<img src="images/thumbs/1.jpg" alt="images/7.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/2.jpg" alt="images/8.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/3.jpg" alt="images/9.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/4.jpg" alt="images/10.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/5.jpg" alt="images/11.jpg"/>
			</a>
			<a href="#">
				<img src="images/thumbs/6.jpg" alt="images/12.jpg"/>
			</a>
		</div>
		<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
		<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
		<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
		<span class="msg_loading"></span>
	</div>
</div>

The alt attribute of the thumbnails will contain the path the full view image. The class names are getting the prefix “msg” so that the style does not interfere with anything else in your web site. So, let’s take a look at the style.

缩略图的alt属性将包含完整视图图像的路径。类名将获得前缀“ msg”，以使样式不会干扰您网站中的其他内容。因此，让我们看一下样式。

CSS (The CSS)

First, we will define the style for the main wrapper:

首先，我们将定义主包装的样式：

.msg_slideshow{
	width:400px;
	height:400px;
	padding:10px;
	position:relative;
	overflow:hidden;
	background:#101010 url(../icons/loading.gif) no-repeat center center;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. When the next image gets loaded it will simply hide the loader.

通过将加载GIF设置为背景图像，我们执行了一个小技巧：等待下一张图片显示时，包装程序将为空并显示加载程序。当下一个图像被加载时，它将简单地隐藏加载器。

We will remove borders and outlines from the link elements:

我们将从链接元素中删除边框和轮廓：

.msg_slideshow a{
	outline:none;
}
.msg_slideshow a img{
	border:none;
}

In order to center the full image in the container, both, vertically and horizontally, we need to add another wrapper around. That wrapper will be displayed as a table cell. Adding the vertical-align:middle property will center the image.

为了使整个图像在容器中垂直和水平居中，我们需要在其周围添加另一个包装。该包装将显示为表格单元格。添加vertical-align：middle属性将使图像居中。

.msg_wrapper{
	width:400px;
	height:400px;
	position:relative;
	margin:0;
	padding:0;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	overflow:hidden;
}
.msg_wrapper img{
	display: inline-block!important;
	vertical-align:middle;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
}

The display property in the image style will make sure that our image does not become display:block because of the fadeIn we will use in our jQuery function. Since we want to keep our image centered horizontally, we need to keep is as an inline (-block) element.

图像样式中的display属性将确保我们的图像不会因为淡入淡出而变成display：block，我们将在jQuery函数中使用它。由于我们要保持图像水平居中，因此我们需要将其作为内联(块)元素。

The control element will have the following style:

控件元素将具有以下样式：

.msg_controls{
	position:absolute;
	bottom:15px;
	right:-110px;
	width:104px;
	height:26px;
	z-index: 20;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background-color:#000;
	opacity:0.8;
}

The common style for all the control elements will be as follows:

所有控件元素的通用样式如下：

.msg_controls a{
	float:left;
	background-color:#000;
	width:20px;
	height:20px;
	margin:3px 3px;
	opacity:0.5;
	background-repeat:no-repeat;
	background-position: center center;
}
.msg_controls a:hover{
	opacity:1.0;
}

The style for each icon:

每个图标的样式：

.msg_controls a.msg_grid{
	background-image:url(../icons/grid.png);
}
.msg_controls a.msg_prev{
	background-image:url(../icons/prev.png);
}
.msg_controls a.msg_next{
	background-image:url(../icons/next.png);
}
.msg_controls a.msg_pause{
	background-image:url(../icons/pause.png);
}
.msg_controls a.msg_play{
	background-image:url(../icons/play.png);
}

The thumbs container will slide in from the top, so we will position it absolutely and hide it initially by setting the top to -230px:

thumbs容器将从顶部滑入，因此我们将其绝对定位，并通过将顶部设置为-230px最初将其隐藏：

.msg_thumbs{
	background:#000;
	position:absolute;
	width:250px;
	height:166px;
	top:-230px;
	left:50%;
	padding:30px;
	margin:0 0 0 -155px;
	-moz-border-radius:0px 0px 10px 10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	opacity:0.9;
	overflow:hidden;
}

With a left of 50% and a left margin of minus half of its width, we can center the absolute element horizontally.

左边的宽度为50％，左边距为宽度的一半，我们可以将绝对元素水平居中。

The wrapper containing the thumbnails will have the following style:

包含缩略图的包装将具有以下样式：

.msg_thumb_wrapper{
	position:absolute;
	width:250px;
	height:166px;
	top:30px;
	left:30px;
	z-index:30;
}

The style of the thumbnails will be as follows:

缩略图的样式如下：

.msg_thumb_wrapper a{
	display:block;
	width:75px;
	height:75px;
	float:left;
	margin:4px;
	opacity:0.8;
}

When we hover the thumbnail we will set the opacity to 1.0, but that we will animate in our jQuery function for a nice effect.

当我们将缩略图悬停时，我们将不透明度设置为1.0，但是我们将在jQuery函数中进行动画处理以获得不错的效果。

The style for the navigation controls:

导航控件的样式：

.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
	width:18px;
	height:20px;
	background-repeat:no-repeat;
	background-position: center center;
	position:absolute;
	top:50%;
	margin-top:-10px;
	opacity:0.5;
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
	opacity:1.0;
}
.msg_thumbs a.msg_thumb_next{
	background-image:url(../icons/next_thumb.png);
	right:5px;
}
.msg_thumbs a.msg_thumb_prev{
	background-image:url(../icons/prev_thumb.png);
	left:5px;
}

The little element for sliding back the grid view:

向后滑动网格视图的小元素：

.msg_thumbs a.msg_thumb_close{
	position:absolute;
	bottom:0px;
	width:50px;
	left:50%;
	margin:0 0 0 -25px;
	background:#202020 url(../icons/up.png) no-repeat center center;
	height:16px;
	opacity:0.7;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

We are adding some border radius to the top right and top left corners. When we hover, we will make it opaque:

我们在右上角和左上角添加了一些边界半径。当我们悬停时，我们将使其变得不透明：

.msg_thumbs a.msg_thumb_close:hover{
	opacity:1.0;
}

And finally, the loading element for the grid view which we center horizontally and vertically with our 50% method:

最后，我们使用50％方法在水平和垂直方向上居中的网格视图的加载元素：

.msg_loading{
	position:absolute;
	background:transparent url(../icons/loading.gif) no-repeat center center;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	margin:-25px 0 0 -25px;
	z-index:25;
	display:none;
}

And that’s all the style. Now, let’s add some magic!

这就是所有样式。现在，让我们添加一些魔术！

JavaScript (The JavaScript)

First, we will define some variables:

首先，我们将定义一些变量：

interval: time between the display of images
时间间隔：图像显示之间的时间
playtime: the timeout for the setInterval function
playtime ：setInterval函数的超时
current: number to control the current image
current ：控制当前图像的编号
current_thumb: the index of the current thumb wrapper
current_thumb ：当前缩略图包装器的索引
nmb_thumb_wrappers: total number of thumb wrappers
nmb_thumb_wrappers ：拇指包装器的总数
nmb_images_wrapper: the number of images inside of each wrapper
nmb_images_wrapper ：每个包装器内的图像数

var interval			= 4000;
var playtime;
var current 			= 0;
var current_thumb 		= 0;
var nmb_thumb_wrappers	= $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper  = 6;

We start the slideshow:

我们开始幻灯片放映：

play();

When we hover over the main container, we will make the controls slide in from the right:

当我们将鼠标悬停在主容器上时，将使控件从右侧滑入：

slideshowMouseEvent();
function slideshowMouseEvent(){
	$('#msg_slideshow').unbind('mouseenter')
					   .bind('mouseenter',showControls)
					   .andSelf()
					   .unbind('mouseleave')
					   .bind('mouseleave',hideControls);
	}

When we click on the grid icon in the controls we will show the thumbnails view, pause the slideshow, and hides the control:

当我们单击控件中的网格图标时，我们将显示缩略图视图，暂停幻灯片放映并隐藏控件：

$('#msg_grid').bind('click',function(e){
	hideControls();
	$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
	pause();
	$('#msg_thumbs').stop().animate({'top':'0px'},500);
	e.preventDefault();
});

Clicking on the icon to hide the thumbnails view will again show the controls:

单击图标以隐藏缩略图视图将再次显示控件：

$('#msg_thumb_close').bind('click',function(e){
	showControls();
	slideshowMouseEvent();
	$('#msg_thumbs').stop().animate({'top':'-230px'},500);
	e.preventDefault();
});

Next, we define what happens when we click pause or play. Besides changing the class, we will call the pause() or play() function:

接下来，我们定义单击暂停或播放时会发生什么。除了更改类之外，我们还将调用pause()或play()函数：

$('#msg_pause_play').bind('click',function(e){
	var $this = $(this);
	if($this.hasClass('msg_play'))
		play();
	else
		pause();
	e.preventDefault();
});

Clicking on “next” or “previous” control will pause our slideshow and show the respective image:

单击“下一个”或“上一个”控件将暂停我们的幻灯片放映并显示相应的图像：

$('#msg_next').bind('click',function(e){
	pause();
	next();
	e.preventDefault();
});
$('#msg_prev').bind('click',function(e){
	pause();
	prev();
	e.preventDefault();
});

Next, we define the functions for showing and hiding the controls. By setting the right value, we will make it slide. Remember, that we set an initial negative value in the CSS.

接下来，我们定义用于显示和隐藏控件的功能。通过设置正确的值，我们将使其滑动。请记住，我们在CSS中设置了初始负值。

function showControls(){
	$('#msg_controls').stop().animate({'right':'15px'},500);
}
function hideControls(){
	$('#msg_controls').stop().animate({'right':'-110px'},500);
}

The play() function which makes the slideshow go:

播放幻灯片的play()函数：

function play(){
	next();
	$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
	playtime = setInterval(next,interval)
}

The function for pausing the slideshow. We change again the class and clear the timeout:

暂停幻灯片播放的功能。我们再次更改类并清除超时：

function pause(){
	$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
	clearTimeout(playtime);
}

The next two function will show the next or previous image:

后两个功能将显示下一个或上一个图像：

function next(){
	++current;
	showImage('r');
}
function prev(){
	--current;
	showImage('l');
}

The next function is for showing the image. We also call alternateThumbs(), which will always change the grid to display the view where the current image is located.

下一个功能是显示图像。我们还调用了alterThumbs()，它将始终更改网格以显示当前图像所在的视图。

function showImage(dir){
	/**
	* the thumbs wrapper being shown, is always 
	* the one containing the current image
	*/
	alternateThumbs();
	
	/**
	* the thumb that will be displayed in full mode
	*/
	var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
				.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
				.find('img');
	if($thumb.length){
		var source = $thumb.attr('alt');
		var $currentImage = $('#msg_wrapper').find('img');
		if($currentImage.length){
			$currentImage.fadeOut(function(){
				$(this).remove();
				$('<img />').load(function(){
					var $image = $(this);
					resize($image);
					$image.hide();
					$('#msg_wrapper').empty().append($image.fadeIn());
				}).attr('src',source);
			});
		}
		else{
			$('<img />').load(function(){
					var $image = $(this);
					resize($image);
					$image.hide();
					$('#msg_wrapper').empty().append($image.fadeIn());
			}).attr('src',source);
		}
				
	}
	else{ //this is actually not necessary since we have a circular slideshow
		if(dir == 'r')
			--current;
		else if(dir == 'l')
			++current;	
		alternateThumbs();
		return;
	}
}

The thumbs wrapper being shown is always the one containing the current image. So, we define a function that controls this:

显示的拇指包装纸始终是包含当前图像的包装纸。因此，我们定义了一个控制此功能的函数：

function alternateThumbs(){
	$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
					.hide();
	current_thumb = Math.ceil(current/nmb_images_wrapper);
	/**
	* if we reach the end, start from the beggining
	*/
	if(current_thumb > nmb_thumb_wrappers){
		current_thumb 	= 1;
		current 		= 1;
	}
	/**
	* if we are at the beggining, go to the end
	*/
	else if(current_thumb == 0){
		current_thumb 	= nmb_thumb_wrappers;
		current 		= current_thumb*nmb_images_wrapper;
	}

	$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
					.show();
}

Next, we define what happens when we navigate through the thumbs:

接下来，我们定义通过拇指导航时会发生什么：

$('#msg_thumb_next').bind('click',function(e){
	next_thumb();
	e.preventDefault();
});
$('#msg_thumb_prev').bind('click',function(e){
	prev_thumb();
	e.preventDefault();
});
function next_thumb(){
	var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
	if($next_wrapper.length){
		$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.fadeOut(function(){
							++current_thumb;
							$next_wrapper.fadeIn();
						});
	}
}
function prev_thumb(){
	var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
	if($prev_wrapper.length){
		$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
						.fadeOut(function(){
							--current_thumb;
							$prev_wrapper.fadeIn();
						});
	}
}

Clicking on a thumbnail will load the respective image:

单击缩略图将加载相应的图像：

$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
	var $this 		= $(this);
	$('#msg_thumb_close').trigger('click');
	var idx			= $this.index();
	var p_idx		= $this.parent().index();
	current			= parseInt(p_idx*nmb_images_wrapper + idx + 1);
	showImage();
	e.preventDefault();
}).bind('mouseenter',function(){
	var $this 		= $(this);
	$this.stop().animate({'opacity':1});
}).bind('mouseleave',function(){
	var $this 		= $(this);
	$this.stop().animate({'opacity':0.5});
});

And finally, our resize function that fits the image inside of our container, which we defined to be 400×400 pixel:

最后，我们的调整大小功能使图像适合容器内的图像，我们将其定义为400×400像素：

function resize($image){
	var theImage 	= new Image();
	theImage.src 	= $image.attr("src");
	var imgwidth 	= theImage.width;
	var imgheight 	= theImage.height;

	var containerwidth  = 400;
	var containerheight = 400;

	if(imgwidth	> containerwidth){
		var newwidth = containerwidth;
		var ratio = imgwidth / containerwidth;
		var newheight = imgheight / ratio;
		if(newheight > containerheight){
			var newnewheight = containerheight;
			var newratio = newheight/containerheight;
			var newnewwidth =newwidth/newratio;
			theImage.width = newnewwidth;
			theImage.height= newnewheight;
		}
		else{
			theImage.width = newwidth;
			theImage.height= newheight;
		}
	}
	else if(imgheight > containerheight){
		var newheight = containerheight;
		var ratio = imgheight / containerheight;
		var newwidth = imgwidth / ratio;
		if(newwidth > containerwidth){
			var newnewwidth = containerwidth;
			var newratio = newwidth/containerwidth;
			var newnewheight =newheight/newratio;
			theImage.height = newnewheight;
			theImage.width= newnewwidth;
		}
		else{
			theImage.width = newwidth;
			theImage.height= newheight;
		}
	}
	$image.css({
		'width'	:theImage.width,
		'height':theImage.height
	});
}

And that’s it! We hope you enjoyed this tutorial and find our little slideshow useful!

就是这样！我们希望您喜欢本教程并发现我们的幻灯片演示有用！