使用jQuery的极简幻灯片库

在今天的教程中，我们将创建一个简单而美观的幻灯片画廊，可以很容易地集成到您的网站。这个想法是有一个容器与我们的幻灯片和选项来查看缩略图的网格，暂停幻灯片，并浏览图片。缩略图网格将从顶部滑出，并允许用户浏览一组缩略图。

所以，我们开始吧！

标记

主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>

缩略图的alt属性将包含完整视图图像的路径。

类名得到前缀“味精”，这样的风格不会干扰你网站上的其他任何东西。

所以，让我们来看看风格。

CSS

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

.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;}

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

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

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

为了将整个图像放在容器中，纵向和横向，我们需要添加另一个包装。该包装将显示为表格单元格。添加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;}

图像样式中的显示属性将确保我们的图像不会成为display：block，因为我们将在我们的jQuery函数中使用fadeIn。由于我们想要保持图像水平居中，所以我们需要保持为内联（-block）元素。

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

.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;}

所有控制元素的共同风格如下：

.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;}

每个图标的样式：

.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);}

拇指容器将从顶部滑入，所以我们将它放置在绝对位置，并通过将顶部设置为-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;}

剩下的50%和左边缘的宽度减去一半的宽度，我们可以将绝对的元素水平放置在水平方向上。

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

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

缩略图的样式如下:

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

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

导航控件的样式:

.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;}

返回网格视图的小元素:

.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;}

我们在右上角和左上角添加一些边框半径。当我们盘旋时，我们会使它不透明:

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

最后是网格视图的加载元素，我们将其水平和垂直放置在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;}

这就是所有的风格。现在，让我们添加一些魔法!

JavaScript

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

• interval: 显示图像之间的时间

• playtime: setInterval函数的超时

• current: 数字控制当前图像

• current_thumb: 当前的拇指包的索引

• nmb_thumb_wrappers: 总数量的缩略图

• 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;

我们开始幻灯片:

play();

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

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

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

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

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

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

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

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

点击“下一步”或“之前”控制将暂停我们的幻灯片并显示各自的图像:

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

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

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

play()函数，使幻灯片的播放:

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

使用幻灯片的功能。我们再次更改类并清除超时:

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

接下来的两个函数将显示下一个或之前的图像:

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

下一个函数是显示图像。我们还可以呼叫交流(alternateThumbs)()，它们将总是改变网格以显示当前图像所在的视图。

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;
}
}

显示的是始终包含当前图像的一个。因此，我们定义了一个控制这个的函数:

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();
}

接下来，我们定义了当我们通过拇指导航时发生的情况:

$('#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();
});
}
}

点击缩略图将载入各自的图像:

$('#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});
});

最后，我们的调整大小与容器内的图像相匹配，我们定义为400400像素:

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
});
}

这是它!我们希望您喜欢本教程，并发现我们的幻灯片非常有用!