jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果

更新时间：2012年08月24日 11:16:23 作者：

我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo

主要的变化点有：把‘下一条'、‘上一条'的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

您可能感兴趣的文章:

详解jQuery的拷贝对象
这篇文章主要为大家介绍了jQuery的拷贝对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
jquery如何改变html标签的样式(两种实现方法)
对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了,接下来介绍实现方法，感兴趣的朋友可以了解下
2013-01-01
jQuery实现两列等高并自适应高度
想要使用jQuery实现两列等高并自适应高度，其实也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。下面就跟小编一起来看下吧
2016-12-12
jQuery条件分页代替离线查询（附代码）
这篇文章主要介绍了jQuery条件分页代替离线查询，通过代码实例让读者更深入了解该功能的操作，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
基于jquery的页面划词搜索JS
这个脚本是网上的代码修改的，兼容各主流浏览器，优化页面异步加载的文字的检索提示框定位，根据选择文字位置与屏幕尺寸计算检索提示框定位。
2010-09-09
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式;通过模态窗口，可以提高网站的可用性;你可以在你的邮件里收到用户发送的反馈消息
2013-01-01
jQuery对象和Javascript对象之间转换的实例代码
jQuery对象和Javascript对象之间转换的实例代码，需要的朋友可以参考一下
2013-03-03
jquery仿苹果的时间/日期选择效果
本篇文章主要介绍了jquery仿苹果的时间/日期选择效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
jQuery模拟超链接点击效果代码
本文将为大家介绍下jQuery模拟超链接点击效果实现，感兴趣的朋友可以参考下哈，希望对你有所帮助
2013-04-04
随鼠标上下滚动的jquery代码
随鼠标上下滚动，在某些时候需要类似的效果，下面有个不错的示例可以实现此效果，需要的朋友可以参考下
2013-12-12