jQuery实现图片文字淡入淡出效果_jquery

(function($){
 $.fn.simpleSpy = function (limit, interval){
 limit = limit || 4;
 /*让div始终显示4个单位的高度*/
 interval = interval || 4000;
 /*控制每个动画效果的时间4000毫秒就是4秒 从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/
 return this.each(function(){
 var $list = $(this),
 /*获得所有列表项目的缓存*/
 items = [],
 /*未初始化*/
 currentItem = limit,
 total = 0,
 /*初始化以后*/
 height = $list.find('> li:first').height();
 /*列表限制li元素*/
 $list.find('> li').each(function(){
 /*获得缓存*/
 items.push('
' + $(this).html() + '
');
 /*获得所有列表的li里面的缓存*/
 });
 
 total = items.length;
 /*始终显示在缓存里的li*/
 
 $list.wrap('').parent().css({height : height * limit});
 /*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/
 
 $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
 /*通过调用遍历方法获得所有li元素在实现移除的方法*/
 
 function spy(){
 /*开始第二个图片从最上方插入的效果*/
 var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
 /*插入一个新的div，透明度和高度为零*/
 
 $list.find('> li:last').animate({ opacity : 0}, 1000, function(){
 /*通过遍历插入一个动画出现的效果 时间为1秒*/
 $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
 /* 增加新的第一个div的高度*/
 $(this).remove(); 
 /*这个移除的效果是什么呢 就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉 没有属性的就是 没有高的 没有动画效果的li*/
 });
 
 currentItem++;
 /*永远在第一个li位置显示出现的是下一个li图片*/
 if(currentItem >= total){
 /*如果4张图片大于或等于所有的大于或等于整个图片的的话*/
 currentItem = 0;
 /*那么就从0开始*/
 }
 setTimeout(spy, interval)
 /*在ul和4秒内完成*/
 }
 
 spy();
 /*效果的整个开关*/
 });
 }; 
})(jQuery);