图片无缝滚动【原创】

web前端 杭州小白 jQuery图片无缝滚动【原创】

其实吧,这个图片无缝滚动网络上到处都有的哈,哈哈,说是自己的原创嘛,其实说是也是,说不是也不是,反正根据自己的需要写的 jQuery版本的图片无缝滚动.

大概样子如下图:

具体的配置功能如下:

/**
 *@author:小白
 *@blog:https://www.xiaobai8.com
 *@版本:v1.0
 *@des:jQuery图片无缝滚动,带自动轮播
 *@不带轮播参数 必须配置 moveUl,Prev,Next,可选moveNum,moveTime,isAuto
 *@带轮播参数的,可选offSet,AutoDirection
 *@例如:
 *使用demo结构类似这样的
 *<div class="xxx">
 *	<div class="xxx J-prev01"></div>
 *	<div class="xxx">
 *		<ul class="clearfix J-ul01">
 *			<li><a title="img01" href="#" target="_blank"><img border="0" title="img01" alt="img01" src="images/20121016.jpg"></a><p>标题1</p></li>
 *			<li><a title="img02" href="#" target="_blank"><img border="0" title="img02" alt="img02" src="images/20121016.jpg"></a><p>标题2</p></li>
 *			<li><a title="img03" href="#" target="_blank"><img border="0" title="img03" alt="img03" src="images/20121016.jpg"></a><p>标题3</p></li>
 *			<li><a title="img04" href="#" target="_blank"><img border="0" title="img04" alt="img04" src="images/20121016.jpg"></a><p>标题4</p></li>
 *			<li><a title="img05" href="#" target="_blank"><img border="0" title="img05" alt="img05" src="images/20121016.jpg"></a><p>标题5</p></li>
 *			<li><a title="img06" href="#" target="_blank"><img border="0" title="img06" alt="img06" src="images/20121016.jpg"></a><p>标题6</p></li>
 *			<li><a title="img07" href="#" target="_blank"><img border="0" title="img07" alt="img07" src="images/20121016.jpg"></a><p>标题7</p></li>
 *			<li><a title="img08" href="#" target="_blank"><img border="0" title="img08" alt="img08" src="images/20121016.jpg"></a><p>标题8</p></li>
 *		</ul>
 *	</div>
 *	<div class="xxx J-right01"></div>
 *</div>
 *var test=new imgScroll();
 *test.init({moveUl:".J-ul01",moveTime:500,moveNum:4,prev:".J-prev01",next:".J-right01"});
 *具体的可参看注释.
 */

主要实现功能,点击左右按钮图片移动指定的位移,同时可以自动轮播图片.主要是无缝的图片滚动.如果您自己看了,会发现比其他的图片无缝滚动要好一点点.嘿嘿.这个只有自己亲自用过才晓得咯。。。

具体的详情请看demo 咯,我相信许多人应该有用得着的地方,哈哈,有bug欢迎指正和拍砖.

稍微介绍一下:这个可以想设置几个就设置滚动几个,但是注意地方是li 的宽度固定

必配置:

moveUl:要移动的ul

Prev:上一个按钮

Next:下一个按钮

可选:

moveNum:移动的个数  默认是5个

moveTime: 移动过去的时间 默认是500

isAuto:是否轮播,默认false.


上面如果设置isAuto之后,可以配置下面的参数:

可选

offSet:自动轮播时间间隔 默认5000

AutoDirection:轮播默认的方向 默认向右,可配置右边0 左边1

【PS:demo中一个未设置自动播放,一个设置了自动播放.可以参考源码修改成自己需要的玩意. 一切以最终demo里面的版本为主】