jQuery-innerfade内部列表自动淡入…

jQuery-innerfade内部列表自动淡入淡出插件

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

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

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

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

二、使用方法简述
1、关于jQuery的使用

$("您需要淡入淡出对象的容器的id或class").innerfade({
animationtype: 动画类型是淡出淡入,还是滑上滑下(slide) （默认是淡入淡出(fade)）,
speed: 淡入淡出的速度,单位为毫秒,或是使用关键字如 (slow, normal 或 fast)(默认是normal),
timeout: 一次动画持续的时间 (默认是2000毫秒),
type: 滑动显示的顺序: "sequence", "random" 或是 "random_start" (默认是sequence),
containerheight: 容器的高度,显示区域的高度 (默认是auto)
runningclass: 给容器添加的样式的名称 (默认是innerfade)
}); 

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

<ul id="news" class="mb20">
    <li>·<a href="#zhangxinxu">二套房贷首付或提至50% 政府拟打压楼市</a></li>
    <li>·<a href="#zhangxinxu">陈云林抵台参加会谈 向绿营抗议者挥手</a></li>
    <li>·<a href="#zhangxinxu">全国猪肉出场价连涨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