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里面的版本为主】