主要的变化点有：把‘下一条'、‘上一条'的click事件抽象到一个函数shownext中。添加setinterval，添加selector元素的hover事件。好了，我们一个个的看。
shownext函数：
复制代码 代码如下:
//显示函数
function shownext(flag) {
//隐藏导航
$(config.selector).find('a').css('display', 'none');
//创建遮罩
$.tranzify.createoverlay(config);
//获取当前显示状态的图片
var currimg = $('.' + config.visibleclass, $(config.selector));
if (flag === true) {
//当前图片不是第一张图片
if (currimg.prev().filter('img').length > 0) {
//将上一张图片设置为可显示状态
currimg.removeclass(config.visibleclass).prev().addclass(config.visibleclass);
} else {
//设置最后一张图片为可显示状态
currimg.removeclass(config.visibleclass);
$(config.selector).find('img').eq(imglength - 1).addclass(config.visibleclass);
}
} else {
//当前图片不是最后一张图片
if (currimg.next().filter('img').length > 0) {
//将下一张图片设置为可显示状态
currimg.removeclass(config.visibleclass).next().addclass(config.visibleclass);
} else {
//设置第一张图片为可显示状态
currimg.removeclass(config.visibleclass);
$(config.selector).find('img').eq(0).addclass(config.visibleclass);
}
}
//运行遮罩效果
$.tranzify.runtransition(config);
}
之所以要把他抽出来，是因为下面的setinterval里面也要用到它，不想有太多重复的代码，所以又必要抽出来，这样统一管理。接下来我们来看setintervale。
复制代码 代码如下:
//设置循环函数
config.interval = setinterval(shownext, (config.multi * 150) + 3000);
其实就是添加一个循环函数，每个多少秒，运行一次shownext函数，显示下一张图片。这里要注意的一点是间隔时间的计算。还记得上一章中runtransition函数中给animate对象设置的间隔时间吗？横向显示设置为slow，也就是600毫秒。每一帧竖向显示设置的时间是150毫秒，一共有config.multi帧。(config.multi * 150)肯定大于600，所以我们这里就取(config.multi * 150)作为时间标准。为了防止动画刚运行完，就接着显示下一张图片，我们加了额外的3秒钟时间。
添加完循环函数后，我们为selector对象添加hover事件，当鼠标移动到对象上时，移出interval，鼠标移出时添加interval。
复制代码 代码如下:
//鼠标移动到对象上，移出循环函数；鼠标移出，添加循环函数
$(config.selector).hover(function () {
clearinterval(config.interval);
}, function () {
config.interval = setinterval(shownext, (config.multi * 150) + 3000);
});
这里我们要注意的是，我们把setinterval创造的对象传给了config.interval。这样做事为了保证上一步中创建的循环函数，删除的循环函数和删除的循环函数是同一个对象。很忌讳把setinterval创建的对象直接传给没有声明的interval，像这样：
复制代码 代码如下:
interval = setinterval(shownext, (config.multi * 150) + 3000);
这样操作时把他传给了window对象的interval，很容易引起代码冲突。比如如果别的代码或者插件里面，也创建了一个setinterval对象，也同样传给了interval（等同于window.interval），那我们插件的clearinterval就会影响到别人代码的正常运行，同理别人的代码也会影响到我们。
最后为了代码的健壮性，我们给createoverlay添加了下面的代码，保证同时只有一个遮罩层：
复制代码 代码如下:
//判断是否有没有运行完的补间动画，存在则立即结束动画，移出对象
var transoverlay = $('#' + config.containerid);
if (transoverlay) {
transoverlay.stop(true, true);
transoverlay.remove();
}
好了，需要讲解的对象都讲完了，大家还是直接下demo看效果吧。
demo下载地址：jquery.animation.tranzify_improve.js