jQuery图片滚动插件全能版

插件开发背景

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

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

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

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

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

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

什么是全能图片滚动

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

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

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

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

4.图片滑上滑下

5.图片渐隐渐现滚动

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

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

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

插件参数

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

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

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

<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>

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

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

代码演示

1.单张图片滚动：

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

2.多张图片滚动：

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

3.文字滚动：

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

4.内容滚动：

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

鉴于许多朋友要求的无缝滚动，本人重新写了一个无缝滚动的插件，详情请点击“jQuery无缝滚动插件”。

插件下载

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

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

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

亲，在下载的同时，也请你顺手点一下Star或者Fork一下，你的支持是我努力更新的动力。