if (dir) {
var titleKey = (dir === ‘back’) ? keyMath – 1 : keyMath + 1;
key = ‘image’ + titleKey;
}
//重新设置h2标题
container.find(‘#title’).text(details[key].title);
//重新设置当前哪个图片为活动状态
container.find(‘.active’).removeClass(‘active’);
container.find(‘a[href=#’ + key + ‘]’).addClass(‘active’);
}
接下来我们完成‘上一条’和‘下一条’导航的功能。
nextChild.add(prevChild).click(function (e) {
//阻止默认事件，否则动画效果就没有了
e.preventDefault();
var arrow = $(this).parent();
//当前slide没有动画时，我们才添加新的动画效果
if (!slide.is(‘:animated’)) {
slide.animate({
left: (arrow.attr(‘id’) === ‘prev’) ? ‘+=400’ : ‘-=400’
}, ‘slow’, ‘easeOutBack’, function () {
(arrow.attr(“id”) === “prev”) ? postAnim(“back”) : postAnim(“forward”);
});
}
});
最后是图片对应的各自导航的功能实现。
$(‘#ui li a’).not(prevChild).not(nextChild).click(function (e) {
//阻止默认事件
e.preventDefault();
//获取当前活动图片id
key = $(this).attr(‘href’).split(‘#’)[1];
//设置动画效果
slide.animate({
left: details[key].position
}, ‘slow’, ‘easeOutBack’, postAnim);
});
本课的内容完毕了，大家可以下载demo，查看功能具体是如下实现的。
demo下载地址：jQuery.animation.position
