jQuery特效大全

 

jQuery全能图片滚动插件

 2013-08-15  蔡宝坚  5,552

 

插件开发背景

随着前端开发领域越来越受到重视，前端开发也变得越来越火热。各种优秀的前端组件层出不穷。尤其是jQuery插件，很多前端组件都是基于jQuery开开发的。

图片滚动是前端开发中可以说是非常常见的一种功能需求。本人之前也写过几篇关于图片滚动的文章。

浅谈我学会的3种jQuery滚动动画思路

原创jQuery图片上下左右滚动代码

jquery图片滚动（渐隐渐现模糊消失效果）

基于以上的图片滚动研究，本人决定开发一个全能的图片滚动

什么是全能图片滚动

其实这个并不是什么新词汇，图片滚动我们知道有这么几种

1.图片从下往上滚动（向上）

2.图片从右往左滚动（向左）

3.图片一张消失一张出现

4.图片滑上滑下

5.图片渐隐渐现滚动

那么有没有一个插件，只要很少的代码就能全部搞定呢？答案肯定是有的。今天本人将介绍我写的插件。

本插件已经移到github上了，查看详细更新和案例演示

jQuery插件的开发，请参照本人之前的一篇教程：自己动手开发jquery插件

插件参数

参数名字	默认值	参数作用
handle	"top"	动画滚动方式，有上下(top)/左右(left)/消失与出现(hide)/渐隐渐现(fadeTo)/滑上滑下(slideTo)
prevNext	true	显示上一页和下一页导航
Nav	true	显示数字导航
myTitle	false	显示图片标题
speed	600	动画滚动速度
delayTime	6000	动画滚动间隔
clickMode	"click"	数字导航滑过的方式，可以是mouseover
sliderNum	1	动画一屏显示的数目

下面我们来看看这个插件怎么使用

1.首先是引入jquery和插件的地址路径。

2.设置html代码，里面的滚动必须是用ul>li包围起来的，一般我们会用这种有意义的html。ul的类默认为sliderbox,暂时不支持自定义，后面如果有人有需要再改。

HTML代码

<div class="slider" id="slider">
<ul class="sliderbox">
<li>
<a href=""><img src="images/1.jpg" alt="图片滚动1"></a>
</li>
<li>
<a href=""><img src="images/2.jpg" alt="图片滚动2"></a>
</li>
<li>
<a href=""><img src="images/3.jpg" alt="图片滚动3"></a>
</li>
</ul>
</div>

CSS代码

.slider{height:170px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/

JS代码

$("#slider").powerSlider();

代码演示

1.单张图片滚动：

• 图片上下滚动（默认）
• 图片左右滚动
• 图片消失与出现
• 图片渐隐渐现
• 图片滑上滑下

2.多张图片滚动：

• 多图上下滚动
• 多图左右滚动
• 多图消失与出现
• 多图渐隐渐现
• 多图滑上滑下

3.文字滚动：

• 文字单行滚动
• 文字多行滚动

4.内容滚动：

• 图文单列滚动
• 图文多列并排滚动
• 图文左右混排单列滚动
• 图文左右混排多列滚动

 

插件下载

非常欢迎你下载使用，这个插件你可以在github项目上下载。power-slider 主页

或者你可以下载这个打包（包含js未压缩、js压缩和16个案例）。power-slider.zip

如果你对这个插件有改进和意见，欢迎反馈给我，或者也可以在github在pull消息给我。

非常感谢你的使用，power-slider正在成长中。你的一点评论和转发都是对我们的支持。

 

http://caibaojian.com/power-slider