移动端图片轮播实现

Posted by luoxiao on 2015-06-18

移动端的项目大多都会用到图片轮播这个功能,这里简单的阐述一下轮播的实现方式,没有对组件进行封装,仅仅说明下实现的原理,后期再对其进行统一封装。

一、公共方法和变量

这里首先,我们看一下这里使用到的一些公共的方法和变量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//当前设备的宽、高度
function view() {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
};
}
//处理事件绑定
function bind(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else {
obj.attachEvent('on' + ev, function() {
fn.call(obj);
});
}
}

因为在chrome的emulation下面,移动端的事件绑定用ontouchstart这种方式无效,因此这里采用事件绑定的方式处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var oTab = document.getElementById("tabPic");
var oList = document.getElementById("picList");
//导航个数
var aNav=oTab.getElementsByTagName("nav")[0].children;
//定时器
var oTimer=0;
//当前位置index
var iNow=0;
//移动后translate值
var iX=0;
//设备宽度
var iW=view().w;
//开始触摸的位置
var iStartTouchX=0;
//当前的translate值
var iStartX=0;

差点忘了,看下html的结构吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section id="tabPic">
<ul id="picList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<section class="picMask">
<p>成都九寨沟景区</p>
<nav>
<a href="javascript:;" class="active"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</nav>
</section>
</section>

二、实现自动轮播

因为是移动端,我们不用像传统的pc端那样,设置top、left这么去调整位置,通过CSS3的translateX,可以很好的去实现图片的X轴位移,transition也可以使我们的移动更加平滑,ok,看看怎么去做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//自动轮播
function auto(){
oTimer = setInterval(function(){
iNow++;
iNow=iNow%aNav.length;
//每次根据当前位置个数进行切换
tab();
},2000);
}
//轮播切换
function tab()
{
iX=-iNow*iW;
oList.style.transition="0.5s";
oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
for(var i=0;i<aNav.length;i++)
{
removeClass(aNav[i],"active");
}
addClass(aNav[iNow],"active");
}

这里,开一个定时器,每2秒切换一次,根据当前的位置*设备的宽度,算出位移的距离。关键在于这里:

1
iNow=iNow%aNav.length;

根据取余这种方式,获取当前的位置,超过当前个数时,回到起点。

三、触摸滑动

1
2
3
4
5
6
7
8
9
bind(oTab,"touchstart",fnStart);
function fnStart(ev)
{
oList.style.transition="none";
ev=ev.changedTouches[0];
iStartTouchX=ev.pageX;
iStartX=iX;
clearInterval(oTimer);
}

changedTouches用于最近一次触发该事件的手指信息,也可以阻止默认的touch事件。touchstart的时候,我们记录一下当前触摸的坐标,同时记录下当前图片列表的translateX的位置,用于后面做移动处理。

1
2
3
4
5
6
7
8
9
10
bind(oTab,"touchmove",fnMove);
function fnMove(ev)
{
ev=ev.changedTouches[0];
//移动后的位置-开始的位置=距离
var iDis=ev.pageX-iStartTouchX;
//距离+当前的translate值 = move后的translate
iX=iStartX+iDis;
oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
}

移动后,记录下手指在设备上移动的距离,以及对当前的图片列表进行移动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fnEnd()
{
//当前的距离/当前设备的宽度 = 当前的位置四舍五入
iNow=iX/iW;
iNow=-Math.round(iNow);
if(iNow<0)
{
iNow=0;
}
if(iNow>aNav.length-1)
{
iNow=aNav.length-1;
}
tab();
auto();
}

最重要的当然是触摸之后的事件处理,首先我们根据当前图片列表的位置除以设备的宽度,可以得到当前的一个位置索引。通过四舍五入可以判断它移动的距离做相应的处理,根据当前的位置,再做tab轮播切换的处理,最后让它恢复自动轮播。

在线实例:移动端轮播

四、结语

实际上移动端的轮播非常的简单,写这种效果的时候,首先理清楚逻辑即可。