by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=454

一、插件功能简述

能让任意列表形式的内容依次淡入淡出切换显示，或是上下切换显示。内容可以是文字，图片等。支持各式标签，列表标签<ul>，<li>或是<div>，<p>标签都可以。

可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示，或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:

您可以狠狠地点击这里：demo实例页面

二、使用方法简述

1、关于jQuery的使用

语法如下：

$().innerfade(options);

其中options是个可选参数对象，API包括：

2、关于HTML代码的使用

HTML代码的使用相对轻松些，您只需要把列表项列好，给容器加个class或是id就可以了，剩下的jQuery会帮您自动完成，确实很方便。
如下简单示例：

<ul id="news" class="mb20">
  <li>·<a href="#">二套房贷首付或提至50% 政府拟打压楼市</a></li>
  <li>·<a href="#">陈云林抵台参加会谈 向绿营抗议者挥手</a></li>
  <li>·<a href="#">全国猪肉出场价连涨6周 农产品涨价幅度大</a></li>
</ul>

或是：

<div class="fade">
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
</div>
<div class="fade">
  <p>a</p><p>b</p><p>c</p><p>d</p><p>e</p>
</div>

3、相应jQuery代码

以下jQuery代码针对上面的HTML代码：

$("#news").innerfade({
  animationtype: "slide",   // 上下滑动
  speed: 750,               // 速度750毫秒
  timeout: 2000,            // 每2秒变换一次
  type: "random",           // 随机显示列表内容
  containerheight: "1em"    // 显示的高度为1em
});
$(".fade").innerfade({
  speed: "slow",           // 速度切换慢
  timeout: 1000,           // 列表内容更换速度1000毫秒
  type: "sequence",        // 顺序显示
  containerheight: "1.2em" // 容器高度1.2em
}); 

三、下载

1、您可以直接下载js插件文件（右键-另存为等）：jquery.innerfade.js

2、zip源文件打包下载
您可以狠狠地点击这里：源文件下载(.zip 20.2K)

四、结语

参考自：http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=162

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=454

（本篇完）