首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

wap手机图片滑动切换特效无css3元素js脚本编写

Posted in Javascript onJuly 28, 2014

手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到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 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)" 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.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()

wap手机图片滑动切换特效无css3元素js脚本编写

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
JavaScript基础之this详解
Jun 04 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 #Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 #Javascript
jquery JSON的解析方式示例介绍
Jul 27 #Javascript
jQuery提交多个表单的小技巧
Jul 27 #Javascript
用javascript对一个json数组深度赋值示例
Jul 27 #Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 #Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 #Javascript
欢迎词(65) 创业计划书(312) 道歉信(39) 心得体会(660) 思想汇报(404) 介绍信(57) 演讲稿(869) 证婚词(21) 岗位职责(1324) 职业生涯规划书(234)
You might like
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP设计模式（八）装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
JS实现小星星特效
2019/12/24 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中__call__用法实例
2014/08/29 Python
Zabbix实现微信报警功能
2016/10/09 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
出门问问全球官方商城：Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
英国手机零售商：Carphone Warehouse
2018/06/06 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
环保宣传标语
2014/06/12 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
培训后的感想
2015/08/07 职场文书
七年级上册生物的课件
2019/08/07 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
Python进行区间取值案例讲解
2021/08/02 Python