jQuery图片滚动插件全能版

插件开发背景

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

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

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

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

jquery图片滚动(渐隐渐现模糊消失效果)

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

什么是全能图片滚动

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

1.图片从下往上滚动(向上)

2.图片从右往左滚动(向左)

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

4.图片滑上滑下

5.图片渐隐渐现滚动

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

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

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

插件参数

参数名字默认值参数作用
handle"top"动画滚动方式,有上下(top)/左右(left)/消失与出现(hide)/渐隐渐现(fadeTo)/滑上滑下(slideTo)
prevNexttrue显示上一页和下一页导航
Navtrue显示数字导航
myTitlefalse显示图片标题
speed600动画滚动速度
delayTime6000动画滚动间隔
clickMode"click"数字导航滑过的方式,可以是mouseover
sliderNum1动画一屏显示的数目

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

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个评论

  1. 茜们大官人cc

    上下滚动的能否设置循环滚动,就是当滚动到最后一页时,接下来在往上滚动时自然出现第一张

    登录回复