插件开发背景
随着前端开发领域越来越受到重视,前端开发也变得越来越火热。各种优秀的前端组件层出不穷。尤其是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.内容滚动:
鉴于许多朋友要求的无缝滚动,本人重新写了一个无缝滚动的插件,详情请点击“jQuery无缝滚动插件”。
插件下载
非常欢迎你下载使用,这个插件你可以在github项目上下载。power-slider 主页
或者你可以下载这个打包(包含js未压缩、js压缩和16个案例)。power-slider.zip
如果你对这个插件有改进和意见,欢迎反馈给我,或者也可以在github在pull消息给我。
亲,在下载的同时,也请你顺手点一下Star或者Fork一下,你的支持是我努力更新的动力。
“jQuery图片滚动插件全能版”有1个评论
上下滚动的能否设置循环滚动,就是当滚动到最后一页时,接下来在往上滚动时自然出现第一张