插件开发背景
随着前端开发领域越来越受到重视,前端开发也变得越来越火热。各种优秀的前端组件层出不穷。尤其是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
相关推荐
Jquery特效大全,精心收集常用jquery特效,大概上百个常用的,很经典,相信你一定会喜欢的,记得推荐给你的朋友啊
jquery特效大全 里面有几十种特效任你选择 jQuery WIN 7透明弹窗效果 jquery表单分类搜索 jQuery滚动顶部定位导航 jQuery幻灯形式的Tab切换效果 jquery实现html5图片上传 jquery鼠标点击放大展开弹出框 jQuery网格...
特效很全,包括导航栏,侧边栏,弹出层等一系列特效
汇聚Jquery的众多特效 值得拥有 哈!
jquery 图片切换大全
jquery特效圣诞雪花
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
网络收集100个常用的jquery特效和插件打包下载
Jquery特效,都是在各大网站上积分下载下来的,里面包含20个jquery特效和100个js特效
jQuery超酷弹出窗体特效,jQuery特效,最大最小化和关闭收缩功能和Css
jquery特效,
js特效和jquery特效
自己亲自整理的常用jquery 特效 共享