效果预览图：

大家可以下载演示看完整效果，下面介绍制作过程。 1.首先创建一个超文本标记语言页面，html结构如下：复制代码代码如下： div id=' slider ' div id=' viewer ' img id=' image1 ' src=' http : img/Amstrad。jpg ' alt=' Amstrad CPC 472 '/img id=' image2 ' src=' http : img/Atari。jpg ' alt=' Atari TT 030 '/img id=' image3 ' src=' http 3360 img/Commodore 16。jpg ' alt='大家一看就明白，查看器包含了几张图片，ul对象里面包含了'上一条'、'下一条'和各个图片对应的导航。 2.接下来需要为这些超文本标记语言元素设置钢性铸铁样式，css我就不多说了，就是给观众，图片等元素加样式，查看器同时只能显示一张图片：复制代码代码如下： #滑块{宽度： 500像素相对位置：} # viewer { width : 400 pxhirte : 300 pxmargin : auto相对位置：飞越：隐藏；} #滑块ul { width : 350 pxmargin : 0 auto add : 0；列表样式类型：无；} #滑块ul :在{内容： }之后。可见性：隐藏；显示器：块；高度： 0;clear:两者；} #滑块李{边距-右： 10px向左浮动：} #prev，# next { position : absolutetop : 175 px } # prev { left : 20px } # next { position : absoluteright : 10px }。隐藏{ display : none } # slide { width : 2000 pxh three : 300 px绝对位置：top : 0；左： 0；} #向左滑动img { float:宽度： 400像素；height : 300 px } # title { margin : 0；文本对齐：中心；} 3.为页面添加jquery和jquery.easing.1.3.js的引用。然后就是我们这篇的重头了，为导航编写相应的射流研究…事件。首先我们需要创建一个新的差异来包装5张图片。复制代码代码如下：美元.内部换行(' div id=' slide '/div ')；接下来我们使用jquery的选择器找到滑块，滑块，上一个，下一个等对象，把他们存到相应的射流研究…变量中。复制代码代码如下： var container=$('#slider ')，prev=container.find('#prev ')，prevChild=prev.find('a ')，next=container . find(' next ').removeClass('隐藏')，nextChild=next.find('a ')，slide=container。查找('幻灯片')创建两个新的射流研究…变量，键保存当前活动图片id，详细信息保存所有图片各自的位置和标题信息。复制代码代码如下：键='image1 '，详细信息={ image1: { position: 0，title: slide.children().等式(0).attr('alt') }，image2: { position: -400，title: slide.children().等式(1)。attr('alt') }，image3: { position: -800，title: slide.children().等式(2)。attr('alt') }，image4: { position: -1200，title: slide.children().等式(3)。attr('alt') }，image5: { position: -1600，title: slide.children().等式(4)。attr(' alt ')} }；为了显示图片标题，我们需要添加一个氘标题到页面。复制代码代码如下： $('h2 '，{ id: 'title '，text: details[key]).标题})。前置到(' #滑块');上述工作完成后，就可以开始为a标签添加点击事件了，这里的a标签分两种，一种是'上一条'和'下一条，另外一种是各图片对应的导航。我们需要分别为他们添加相应的点击事件。但是他们都会使用到一个相同的回调函数，我们先完成回调函数的编写。代码思路我就直接以注释的方式完成。

复制代码如下：函数postAnim(dir) {//首先我们得到当前活动图片的id，其中只包含数字部分var key math=par sent(key。匹配(/ d $/)；//幻灯片左侧小于0，也就是说当前活动图片不是图片1，显示‘上一张’导航；否则，“上一个”导航会消失(parsent(slide . CSS(' left '))0)？prev . show(): prev . hide()；//slide的左边等于-1600，表示当前活动图片为第五章，‘next’导航消失；否则，将显示“next”导航(par sent(slide . CSS(' left ')===-1600)？next . hide(): next . show()；//使用“上一个”和“下一个”导航时，条件语句是否有意义。功能是点击‘上一个’键减一，点击‘下一个’键加1 if(dir){ var title key=(dir===‘back’)？KeyMath-1 : KeyMath 1；key=' image ' titleKey}//重置h2标题容器. find ('# title ')。文本(详细信息[键]。标题)；//重置当前激活的图片。container.find('。活动’)。remove class(' active ')；container.find('a[href=#' key ']')。add CLaSS(' active ')；}接下来，我们完成‘上一个’和‘下一个’的导航功能。复制代码如下： nextchild。添加(prevchild)。click(function(e)){//阻止默认事件，否则动画效果将没有e . preventdefault()；var arrow=$(this)。parent()；//当前幻灯片没有动画时，如果(！slide . is(' : animated '){ slide . animate({ left :(arrow . attr(' id ')===' prev ')？=400' : '-=400' }，' slow '，' easeOutBack '，function(){(arrow . attr(' id ')===' prev ')？postAnim(' back '): postAnim(' forward ')；});} });最后是图片对应的各自导航的功能实现。复制代码如下： $(“# ui阿利”)。not (prevchild)。不是(nextchild)。单击(函数(e){//阻止默认事件e . preventdefault()；//获取当前活动图片id键=$ (this)。attr ('href ')。split(' # ')[1]；//设置动画效果slide . animation({ left : details[key])。position}、‘慢速’、‘轻松内地’、‘post anim’)；});本课内容讲完后，可以下载演示，观看功能实现如下。演示下载地址：jQuery.animation.position