手机焦点图轮播【原创】

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里面有效果源码.这个亲们都懂的.俺就不讲了.注释也还清晰吧……

2人评论了“手机焦点图轮播【原创】”

  1. 淡定的小汤圆

    var person = new Person(‘淡定的小汤圆’);
    person.priority = ‘江湖告急’;
    person.question(‘这个demo播放到最后一张怎么设置让他继续波翻第一章?’);

    1. 杭州-小白

      这个没有做无缝滚动,如果加无缝滚动,得加功能了

评论区已关闭。