使用jQuery UI实现推荐内容的幻灯展示

炫耀你的网站上最好的内容或博客作为一种很直观的方式,将会吸引更多的眼球。使用一个auto-playing内容滑球是一种技术来展现你的资料。它为您节省空间,为更好的用户体验,并且如果你加一点眼糖果给它,那么就不回头。
预览：View  Demo

有几个教程创建特色的内容如从CSS-Tricks滑,但它使用jQuery相对滑动插件。今天我要向你们展示如何创建一个展示内容的网站使用滑jQuery UI的图书馆。

增加JavaScript文档

首先，抓住jQuery和jQuery的用户界面库，如果你还没有，包括他们在您的网页标题。对于本教程，您需要的jQuery UI版本1.5.3。我通常使用谷歌AJAX库加载的jQuery和jQuery UI的文件，因为它作为你的JavaScript文件加币的行为。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" >
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" >
</script>

内容结构

现在创建一个像列表，并在一个单独的分区的内容对应于每个标签的标签内容结构分区。

<div id="featured" >
	<ul class="ui-tabs-nav">
	    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1">
<img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>

	    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2">
<img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>

	    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3">
<img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>

	    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4">
<img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>

	</ul>
	<!-- First Content -->
	<div id="fragment-1" class="ui-tabs-panel" style="">
		<img src="images/image1.jpg" alt="" />

		<div class="info" >
		<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus.
 Pellentesque ut diam....<a href="#" >read more</a></p>

		</div>
	</div>
	<!-- Second Content -->
	<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">

		<img src="images/image2.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>

		<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem,
 sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
		</div>
	</div>
    <!-- Third Content -->

    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
		<img src="images/image3.jpg" alt="" />

		<div class="info" >
		<h2><a href="#" >35 Amazing Logo Designs</a></h2>
		<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi.
Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>

	    </div>
	</div>
    <!-- Fourth Content -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">

		<img src="images/image4.jpg" alt="" />
		<div class="info" >
		<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>

		<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta,
erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	    </div>
	</div>
</div>

CSS 样式

现在为CSS的一部分，我固定的宽度和高度与外容器div的id＃功能和增加了250像素填充权，以便为我们的特色内容滑块绝对定位导航标签空间。另外，我设置其属性的相对位置，这样我可以绝对地位内部功能分区＃相对它的分子。

#featured{
	width:400px;
	padding-right:250px;
	position:relative;
	height:250px;
	background:#fff;
	border:5px solid #ccc;
}

标签是绝对的导航定位于右下列形式：

#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:400px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:18px;
}

展板内容给出以下样式，以适合他们内部功能分区的容器。与UI标签隐藏类是必不可少的工作这个脚本，因为它决定哪些内容，哪些是隐藏的面板显示。

#featured .ui-tabs-panel{
	width:400px; height:250px;
	background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
	display:none;
}

并给出所选标签的左箭头背景图像。以下是所选标签的样式。

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:20px;
	outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}

由于我使用的导航标签很小的图片，下面我向他们申请样式。

#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}

同时,在内容小组表现,但它有一个图像的大小400px x 250px和一些相应的标题和描述与阶级内部信息的处理。信息显示在图像处理,我绝对位置上与一个透明背景图像添加一些画面。

#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px; width: 400px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:18px; font-family:Georgia, serif;
	color:#fff; padding:5px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}

注:所有必要的风格是在style.css文件。

JavaScript代码

最后这个JavaScript代码,这样会使我们的工作内容滑。我用旋转标签的jQuery UI特性使图书馆内容板旋转后自动给定的时间间隔。

	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});

还有你漂亮的展示内容的滑球。

预览：View  Demo 下载 Download

英文：Create Featured Content Slider Using jQuery UI

翻译整理： 使用jQuery UI实现推荐内容的幻灯展示 | web启点