<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size:20px;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;;
}
#box{
width: 16rem;height:7.5rem;overflow: hidden;line-height: 7.5rem;font-size: 50px;text-align: center;color:#fff;
}
ul{
width: 64rem;height:7.5rem;overflow:hidden;
}
ul li{
width: 16rem;height:7.5rem;float:left;
}
</style>
<script>
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=doc.documentElement.client Width*20/320+'px';
}
change();
win.onresize=change;
})(window,document);
</script>
<script>
function drag(oDiv,aLi){
var x=0;
var iNow=0;
oDiv.addEventListener('touchstart', function(ev){
var id= ev.targetTouches[0].identifier;
var disX= ev.targetTouches[0].pageX - x
var downX=ev.targetTouches[0].pageX;
function fnMove(ev){
if(ev.targetTouches[0].identifier==id){
x=ev.targetTouches[0].pageX - disX;
oDiv.style.transform='translateX('+x+'px)';
}
}
function fnEnd(ev){
if(ev.changedTouches[0].identifier==id){
document.removeEventListener('touchmove',fnMove, false);
document.removeEventListener('touchend', fnEnd, false);
oDiv.style.transition='1s all linear';
var upX=ev.changedTouches[0].pageX;
if(Math.abs(upX-downX)>50){
if(upX-downX<0){
iNow++;
if(iNow==4){
iNow=3;
}
}else{
iNow--;
if(iNow==-1){
iNow=0;
}
}
}
oDiv.style.transform='translateX('+-iNow*aLi.offsetWidth+'px)';
oDiv.addEventListener('transitionend',function(){
oDiv.style.transition='none';
x=-iNow*aLi.offsetWidth;
},false);
}
}
document.addEventListener('touchmove',fnMove, false);
document.addEventListener('touchend', fnEnd, false);
ev.preventDefault(); //事件绑定用的阻止默认事件;
}, false)
};
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#box ul');
var aLi=oUl.children;
drag(oUl,aLi[0]);
},false);
</script>
</head>
<body>
<div id="box">
<ul >
<li style="background:red;">1</li>
<li style="background:yellow;">2</li>
<li style="background:blue;">3</li>
<li style="background:green;">4</li>
</ul>
</div>
</body>
</html>移动端如何实现轮播图
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- jsonp 因为jsonp不是使用XMLHttpRequest对象 在移动端不用鼠标事件 touch事件 ...
- 在上篇文章中，使用改变left的值实现轮播效果，在PC端上因为要兼容旧版浏览器，所以都采用这种做法。但是在移动端上...
- PC端上实现图片轮播效果非常简单，只要通过使用click事件就可以非常简单的实现效果，但是在移动端上，就要通过核心...
