效果预览图片：
[img]http://files.jb51.net/file_images/article/201208/2012082416564814.png[/img]
大家可以下载demo看完整效果，下面介绍制作过程。
1.首先创建一个html页面，html结构如下：
[url=]<li><a href="#image1" title="Image 1" class="active">Image 1</a></li>
<li><a href="#image2" title="Image 2">Image 2</a></li>
<li><a href="#image3" title="Image 3">Image 3</a></li>
<li><a href="#image4" title="Image 4">Image 4</a></li>
<li><a href="#image5" title="Image 5">Image 5</a></li>
<li class="hidden" id="next"><a href="" title="Next">»</a></li>
</ul>
</div>
大家一看就明白，viewer包含了几张图片，ul对象里面包含了‘上一条'、‘下一条'和各个图片对应的导航。
2.接下来需要为这些html元素设置css样式，css我就不多说了，就是给viewer、图片等元素加样式，viewer同时只能显示一张图片：
#slider
{
width: 500px;
position: relative;
}
#viewer
{
width: 400px;
height: 300px;
margin: auto;
position: relative;
overflow: hidden;
}
#slider ul
{
width: 350px;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#slider ul:after
{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#slider li
{
margin-right: 10px;
float: left;
}
#prev, #next
{
position: absolute;
top: 175px;
}
#prev
{
left: 20px;
}
#next
{
position: absolute;
right: 10px;
}
.hidden
{
display: none;
}
#slide
{
width: 2000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
#slide img
{
float: left;
width: 400px;
height: 300px;
}
#title
{
margin: 0;
text-align: center;
}
3.为页面添加jquery和jquery.easing.1.3.js的引用。然后就是我们这篇的重头了，为导航编写相应的js事件。
首先我们需要创建一个新的div来包装5张图片。
[url=http://xiazai.jb51.net/201208/yuanma/jQuery.animation.position_jb51.rar]jQuery.animation.position[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
