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

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

发布时间：2015-10-08编辑：余斗文件大小：119KB阅读：(0)字号： 大 中 小

一、插件功能简述

能让任意列表形式的内容依次淡入淡出切换显示，或是上下切换显示。内容可以是文字，图片等。支持各式标签，列表标签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="https://www.yudouyudou.com/jiaochengheji/DedeCMS/140.html">DedeCMS图片上传文件路径修改</a></li>
<li>·<a href="https://www.yudouyudou.com/ziyuanxiazai/gongjuchajian/165.html">DedeCMS官方密码重置工具</a></li>
<li>·<a href="https://www.yudouyudou.com/ziyuanxiazai/gongjuchajian/117.html">DedeCMS一个完整的留言簿开发模版</a></li>
<li>·<a href="https://www.yudouyudou.com/jiaochengheji/DedeCMS/120.html">DedeCMS留言簿插件二次开发浅析</a></li>
<li>·<a href="https://www.yudouyudou.com/jiaochengheji/DedeCMS/33.html">DedeCMS织梦Tags标签页制作</a></li>
<li>·<a href="https://www.yudouyudou.com/jiaochengheji/DedeCMS/31.html">DedeCMS为文章图片自动添加ALT属性为标题</a></li>
</ul>

或是

<div class="fade">
<p>class1</p><p>class2</p><p>class3</p><p>class4</p><p>class5</p><p>class6</p><p>class7</p><p>class8</p><p>class9</p>
</div>
<div class="fade">
<p>class a</p><p>class b</p><p>class c</p><p>class d</p><p>class e</p><p>class f</p><p>class g</p><p>class h</p><p>class i</p>
</div>

3、相应jQuery代码

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

<div class="fade">
<p>class1</p><p>class2</p><p>class3</p><p>class4</p><p>class5</p><p>class6</p><p>class7</p><p>class8</p><p>class9</p>
</div>
<div class="fade">
<p>class a</p><p>class b</p><p>class c</p><p>class d</p><p>class e</p><p>class f</p><p>class g</p><p>class h</p><p>class i</p>
</div>