wap圖片滾動特效無css3元素純js腳本編寫

作者：Eve Cole 更新時間：2025-04-22 18:00:04

手機圖片滑動切換，網上有很多這樣的例子，但都藉助於其他組件，讓代碼混亂的不行；還有就是用到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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li><!-- <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> --></ul><dl><span>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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li><li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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.ad dEventListener(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()