手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所 有下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法；
问题一：给图片加上链接后，在拖动的时候总是跳到其他页面；
问题根源主要是不能判断是点击还是拖动，手机事件一般顺序是 touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根据不同手机可能会有不同。触屏手机的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后执行的，当我们有touchstart，touchmove，touchend处理完后，如果不进行return或取消默认就会触发click事件，这样网页就跳走了，解决办法是记录touchstart的坐标点和touchmove的坐标点，根据两个坐标点算出触点是否移动过，其中值得关注的是事件的Event参数，触屏一般是 event.touches，event.targetTouches，event.changedTouches。我在测试当中发现者三个参数的值时一样的，不过值得注意的是touchend事件不会得到触点坐标（也或许是设备问题），在移动的时候touchmove会不断出发，有时候touchmove会不触发，其中就是浏览器自带一下功能把触点（或鼠标）脱离了选中的元素，比如上时间按住会出现菜单，（pc上图片就会生成一个可以拖动的缩略图），这样就要在touchstart（mousedown）的时候先 event.preventDefault();取消默认。
问题二：网页中的上下滚动条不能在拖动图片的时候滚动；
相信这个问题只要制作过得都会遇到，其实主要是在移动（touchmove，mousemove）的时候取消了默认事件event.preventDefault(),在这里我们需要做的是，是否移动获得触点和开始的触点是否一致，如果一致就直接返回，还要算出是移动的x轴多一点还是y轴移动的多一点，这样我们就可以做左右滑动的时候取消默认，在上学的时候不取消；
问题三： 并且不能兼容pc机器上的拖动
这是因为在绑定事件的时候不能完全考虑事件名称是touchstart还是mousedown ，从网上搜了一下，感觉做的不做，就直接抄过来了
this.eventName={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
}
在做判断
if(!device){
this.eventName.touchstart='mousedown';
this.eventName.touchmove='mousemove';
this.eventName.touchend='mouseup';
}
dom.addEventListener(this.eventName.touchstart,handleEvent,false);
大概是这个意思，根据设备不同绑定不同的事件
其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<style type="text/css"> html,body,*{ margin: 0; padding: 0; border: 0;}
#wapListImage1, #wapListImage{width: 100%; overflow: hidden; height: auto; cursor: move; zoom:1; position: relative;}
#wapListImage1 ul,
#wapListImage1 ul li,
#wapListImage1 ul,
#wapListImage ul li{ list-style: none;}
#wapListImage1 ul, #wapListImage ul{width: 99999px;}
#wapListImage1 ul li, #wapListImage ul li{ float: left;}
#wapListImage ul li a img:focus,
#wapListImage ul li a img:checked,
#wapListImage ul li a img,
#wapListImage ul li a img:active,
#wapListImage ul li a,#wapListImage ul li a:active{cursor: move;}
#wapListImage dl{ position: absolute; bottom: 10px; right: 0;}
#wapListImage dl span{overflow: hidden;width: 10px; height: 10px; background-color: #900; display: inline-block;}
#wapListImage dl span.selected{ background-color: #000;}
</style>
</head>
<body>
<div id="k">
<div id="wapListImage">
<ul>
<li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
<!-- <li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> -->
</ul>
<dl>
<span class="selected">1</span>
<span>2</span>
<span>3</span>
<!-- <span>4</span>
<span>5</span>
<span>6</span> --> </dl>
</div>
</div>
<div style="height:200px;"></div>
<div id="wapListImage1">
<ul>
<li><a href="javascript:void(0)" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><a href="javascript:void(0)" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
</ul>
</div>
<script type="text/javascript">
;(function(w,d){
var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
function WapImage(){
this.options={
dom: null,
speed:200,
isupdate:true,
time:3000,
leftOrright:'left',
isfor:false,
callBack:function(){}
},
this.eventName={
touchstart:'touchstart',
touchmove:'touchmove',
touchend:'touchend',
},
this.point={
x:5,
y:5,
pageX1:0,
pageX2:0,
pageY1:0,
pageY2:0
},
this.page={
bodyWidth:320,
domUL:null,
liList:null,
index: 0,
flag:false,
sTime:0,
eTime:0,
isDown:false,
mleft:0,
back:30,
moveId:[],
nextId:null,
prevId:null,
isdom:false
},
this.Event={
handleEvent: function(event,lib){
event = event ? event : window.event;
// console.log(event.type)
switch(event.type){ case "touchstart":
var touch = event.touches[0];
case "mousedown":
if(lib.page.isDown) return;
lib.page.isDown=true;
lib.page.sTime=lib.page.eTime=new Date().getTime();
lib.Event.stop(lib,lib);
if(event.type=="mousedown"){
touch = event;
event.preventDefault();
}
lib.point.pageX1 = lib.point.pageX2 = touch.pageX;
lib.point.pageY1 = lib.point.pageY2 = touch.pageY;
lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;
break;
case "touchmove":
var touch = event.touches[0];
case "mousemove":
if(!lib.page.isDown) return; if(event.type=="mousemove"){
touch = event;
}
lib.point.pageX2 = touch.pageX;
lib.point.pageY2 = touch.pageY; if(lib.point.pageX1==lib.point.pageX2){
event.preventDefault();
return false;
}
var changeX = lib.point.pageX1 - lib.point.pageX2;
var changeY = lib.point.pageY1 - lib.point.pageY2;
if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件
event.preventDefault();
lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+'px';
if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){
lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
lib.page.mleft=-(lib.page.liList.length-1)*lib.page.bodyWidth;
}
if(parseFloat(lib.page.domUL.style.marginLeft)>0){
lib.page.domUL.style.marginLeft='0px';
lib.page.mleft=0;
} }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件 }else{//长按或点击 }
break;
case "mouseup":
case "touchend":
if(!lib.page.isDown) return;
lib.page.eTime=new Date().getTime();
lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0; var changeX = lib.point.pageX1 - lib.point.pageX2;
var changeY = lib.point.pageY1 - lib.point.pageY2;
if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件 event.preventDefault();
lib.Event.move.call(this,lib); }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件
lib.Event.move.call(this,lib);
}else{//长按或点击
if((lib.page.eTime - lib.page.sTime) > 300) {//长按
}else{//点击
if(event.button==0 || event.type=='touchend'){
var a = lib.page.liList[lib.page.index].getElementsByTagName('a')[0];
if(typeof a.getAttribute('target')=='object'){
w.location=a.getAttribute('hrefto')
}else{
w.open(a.getAttribute('hrefto'));
}
} }
}
lib.page.isDown=false;
break;
default:
break;
}
},
position: function(lib,index){
// if(index==undefined){
// lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
// }else{
// lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +'px';
// lib.page.index=index;
// } if(!lib.options.isfor){
if(index==undefined){
lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
}else{
lib.page.domUL.style.marginLeft= -((index-1)*lib.page.bodyWidth) +'px';
lib.page.index=index-1;
}
lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute('index'))+1});
}else{
if(index==undefined){
lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
}else{
lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
while(true){
if(parseInt(index)==parseInt(lib.page.liList[1].getAttribute('index'))+1){
break;
}
lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
}
}
lib.options.callBack({"index":parseInt(lib.page.liList[1].getAttribute('index'))+1});
}
},
stop:function(lib){
for(var i =0;i<lib.page.moveId.length;i++){
clearInterval(lib.page.moveId[i]);
}
lib.page.moveId=[];
},
start:function(lib){
if(lib.options.isupdate){
lib.page.moveId[lib.page.moveId.length] = setInterval(function(){
if(lib.options.leftOrright=='left'){
lib.Event.next(lib,lib);
}else{
lib.Event.prev(lib,lib);
}
},lib.options.time);
}
},
next:function(lib){
// console.log(lib.page.prevId.length+"nextId")
// for (var n=0;n<lib.page.prevId.length;n++) {
// // clearInterval(lib.page.prevId[n]);
// };
// lib.page.prevId=[];
clearInterval(lib.page.prevId);
lib.page.prevId=null;
// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
while(true){
if(yu==0){
yu=lib.page.bodyWidth;
break;
}else if(yu<0){
yu= Math.abs(yu);
break;
}
yu=yu-lib.page.bodyWidth
}
// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
var left = yu/lib.options.speed;
var c = 0;
if(lib.page.index==lib.page.liList.length-1){
lib.page.flag=false;
return;
}
clearInterval(lib.page.nextId);
lib.page.nextId = window.setInterval(function(){
// lib.Event.stop(lib,lib);
// if(lib.page.moveId==null){
// clearInterval(id);
// }
c=c+5;
lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)-left*5)+'px';
// console.log("next"+lib.page.domUL.style.marginLeft);
if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth ){
if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){
lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
}
clearInterval(lib.page.nextId);
// for(var n=0;n=lib.page.nextId.length;n++){
// clearInterval(lib.page.nextId[0]);
// }
// lib.page.nextId=[];
lib.page.index++;
lib.page.flag=false;
lib.Event.domUpdate.call(this,lib,'r');
if(lib.page.moveId.length==0){
lib.Event.start(lib,lib);
} }
},5);
},
prev:function(lib){
// console.log(lib.page.nextId.length+"nextId")
// for(var n=0;n=lib.page.nextId.length;n++){
// // clearInterval(lib.page.nextId[0]);
// }
clearInterval(lib.page.nextId);
lib.page.nextId=null;
// lib.page.nextId=[];
// var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
// var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
// console.log(yu+"----"+lib.page.domUL.style.marginLeft)
while(true){
if(yu==0){
yu=lib.page.bodyWidth;
break;
}else if(yu<0){
yu= lib.page.bodyWidth-Math.abs(yu);
break;
}
yu=yu-lib.page.bodyWidth
}
// var left = (lib.page.bodyWidth-yu)/lib.options.speed;
var left = yu/lib.options.speed;
var c = 0,id;
if(lib.page.index==0){
lib.page.flag=false;
return;
}
var ml = parseFloat(lib.page.domUL.style.marginLeft);
clearInterval(lib.page.prevId);
lib.page.prevId = window.setInterval(function(){
c=c+5;
lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+'px';
// console.log(lib.page.domUL.style.marginLeft);
if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)>=0){
if(parseFloat(lib.page.domUL.style.marginLeft)>=0){
lib.page.domUL.style.marginLeft='0px';
} clearInterval(lib.page.prevId);
// for (var n=0;n<lib.page.prevId.length;n++) {
// clearInterval(lib.page.prevId[n]);
// };
// lib.page.prevId=[]; lib.page.index--;
lib.page.flag=false;
lib.Event.domUpdate.call(this,lib,'l');
if(lib.page.moveId.length==0){
lib.Event.start(lib,lib);
}
}
},5);
},
move:function(lib){
if(lib.page.flag) return;
lib.page.flag=true;
if(Math.abs(lib.point.pageX1-lib.point.pageX2)<lib.page.back){
var h = Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))
h = h/70; var hi = 0;
var hid;
hid = window.setInterval(function(){ if(lib.point.pageX2>lib.point.pageX1){
lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) - h*5) +'px';
}else{ lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) + h*5) + 'px';
}
hi=hi+5;
if(hi>=70){
clearInterval(hid);
lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
lib.page.flag=false;
}
},5);
return;
} if(lib.point.pageX1-lib.point.pageX2>0){
lib.Event.next.call(this,lib);
}else if(lib.point.pageX2-lib.point.pageX1>0){
// console.log("===")
lib.Event.prev.call(this,lib);
}
},
domUpdate: function(lib,type){
if(lib.page.isdom) return;
lib.page.isdom=true; if(!lib.options.isfor){
var index = lib.page.liList[lib.page.index].getAttribute('index');
lib.options.callBack({"index":parseInt(index)+1});
lib.page.isdom=false;
return;
}
if(type=='l'){
lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)-lib.page.bodyWidth)+'px';
//lib.page.index++;
}else if(type=='r'){
lib.page.domUL.appendChild(lib.page.liList[0]);
lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)+lib.page.bodyWidth)+'px';
//lib.page.index--;
}
lib.page.index=1;
// console.log(lib.page.index)
var index = lib.page.liList[lib.page.index].getAttribute('index');
lib.options.callBack({"index":parseInt(index)+1});
lib.page.isdom=false;
}
};
};
WapImage.prototype = {
setoption: function(arg){
for(var i in this.options){
this.options[i]= arg[i] !== undefined ? arg[i] : this.options[i];
}
if(!device){
this.eventName.touchstart='mousedown';
this.eventName.touchmove='mousemove';
this.eventName.touchend='mouseup';
}
//return temp;
},
bindEvent: function(){
var lib = this;
this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener(this.eventName.touchmove,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener(this.eventName.touchend,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
w.addEventListener('resize',function(){lib.init();},false);
},
init:function(){
this.page.bodyWidth=document.body.clientWidth;
this.page.liList= this.options.dom.getElementsByTagName('li');
this.page.domUL = this.options.dom.getElementsByTagName('ul')[0];
this.options.dom.style.width=this.page.bodyWidth+'px'; for(var i=0;i<this.page.liList.length;i++){
var item = this.page.liList[i];
var img = item.getElementsByTagName('img')[0];
item.setAttribute('index',i);
item.style.width=this.page.bodyWidth+'px';
img.style.width = this.page.bodyWidth+'px';
}
if(this.page.liList.length<3){
var length = this.page.liList.length;
if(length==1){
this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
}else{
for(var i=0;i<length;i++){
this.page.domUL.appendChild(this.page.liList[i].cloneNode(true));
}
} this.page.liList= this.options.dom.getElementsByTagName('li');
}
},
position:function(index){
this.Event.position.call(this,this,index);
},
next:function(){
this.Event.next.call(this,this);
},
prev:function(){
this.Event.prev.call(this,this);
},
start: function(arg){
this.setoption(arg);
this.init();
this.position();
this.bindEvent();
this.Event.domUpdate(this,'l');
this.Event.start(this); }
};
var loaded=function(){
w.WapImage=new WapImage();
w.WapImages=new WapImage();
};
(function(){
if(d.body){
loaded();
}else{
if(d.addEventListener){
d.addEventListener( 'DOMContentLoaded', function(){
d.removeEventListener( 'DOMContentLoaded', arguments.callee, false );
loaded();
}, false );
}else if(d.attachEvent){
d.attachEvent( 'onreadystatechange', function(){
if( d.readyState === 'complete' ){
d.detachEvent( 'onreadystatechange', arguments.callee );
loaded();
}
});
}
}
})();
})(window,document,undefined); window.onload = function(){
var obj = {
dom:document.getElementById('wapListImage'),
isupdate:true,
time:3000,
isfor:true,
leftOrright:'left',
callBack:function(obj){
var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k<span.length;k++){
span[k].className='';
}
span[obj.index-1].className='selected'
// console.log(obj.index)
}
};
WapImage.start(obj);
WapImage.position(2)
var obj2 = {
dom:document.getElementById('wapListImage1'),
callBack:function(obj){
// console.log(obj.index)
}
};
WapImages.start(obj2);
// var img = new w.WapImage();
// img.start(obj);
}
</script>
</body>
</html>
用法：
在页面加载完成后
var obj = {
dom:document.getElementById('wapListImage'),//dom元素
isupdate:true,//是否自动切换
time:3000,//自动切换的时间毫秒
isfor:true, //是否循环播放，即到最后一张是否直接转入第一张，或到第一张直接转入最后一张
leftOrright:'left',//像左侧自动切换还是像右侧自动切换
callBack:function(obj){//切换成功后回调函数 其实有index参数为当前第几张图片
//自己处理
var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
for(var k = 0;k<span.length;k++){
span[k].className='';
}
span[obj.index-1].className='selected'
// console.log(obj.index)
}
};
WapImage.start(obj);
WapImage.position(2)
如果一个也没需要多个图片切换效果可以再代码中查找 var loaded=function()
在其中定义您需要个切换图片个数，并定出名字
如
w.WapImage=new WapImage();
w.WapImages=new WapImage();
在页面加载完后就可以直接调用
WapImage.start()和WapImages.start()