web前端 杭州-小白 jQuery 手机焦点图轮播【原创】
因为之前手机站,首页轮播的那个效果也是自己写的,有个郁闷的bug.所以一直想解决,SO,今天试着又重新写了,这是我第一次用面对对象的方式,写的,好不好我不说了.偶JS是菜鸟级别哇.我用jQuery写的.
效果呢主要是支持mobile上面看的时候,可以左边右边来回的滑动,并且靠近边缘有一点点的缓冲效果.在iPhone上面看了下蛮流畅的.在安卓上面看.还马马虎虎的吧.有些问题我可能没考虑到.求指点或者那啥拍砖也行哇 .
这个效果就是基础的版本而已,我自己分析了下.还可以继续加强和优化.搞出更多的功能来.哇咔咔比如左右按钮,各种探索大家自己去挖掘吧。。哈哈
效果如图:
代码片段如下:
/** *@author:小白 *@blog:https://www.xiaobai8.com *@版本:v1.0 *@des:普通焦点图,主要是为了支持手机上面触摸横向滚动 *@可以自行设置参数 *@例如: *var test=new mobileImgScroll(); *test.init({ Touch:"#J-Touch", TouchIco:"#J-Touch-ico", Width:320, Current:"on", isAuto:false, offSet:3000 *}); *暂时只是自己用而已没考虑很多。符合下面或者demo的结构就行。 *<ul id="XXXX"> <li class="XXXX">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> *</ul> */
亲,请用手机观看,浏览器观看意义不大.网上这个效果一大堆呢.
好了废话不多说.上正餐.
请看demo 这个demo里面有效果源码.这个亲们都懂的.俺就不讲了.注释也还清晰吧……
var person = new Person(‘淡定的小汤圆’);
person.priority = ‘江湖告急’;
person.question(‘这个demo播放到最后一张怎么设置让他继续波翻第一章?’);
这个没有做无缝滚动,如果加无缝滚动,得加功能了