您现在的位置是：首页 > 后端

当前栏目

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

JS css3 手机图片脚本元素编写切换

2023-06-13 09:15:39 时间

手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到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);
大概是这个意思，根据设备不同绑定不同的事件

其实还碰到了很多的问题，就不一一说明了

不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"/>
<metacontent="yes"name="apple-mobile-web-app-capable"/>
<metacontent="black"name="apple-mobile-web-app-status-bar-style"/>
<metacontent="telephone=no"name="format-detection"/>
<title></title>
<styletype="text/css">

html,body,*{margin:0;padding:0;border:0;}
#wapListImage1,#wapListImage{width:100%;overflow:hidden;height:auto;cursor:move;zoom:1;position:relative;}
#wapListImage1ul,
#wapListImage1ulli,
#wapListImage1ul,
#wapListImageulli{list-style:none;}
#wapListImage1ul,#wapListImageul{width:99999px;}
#wapListImage1ulli,#wapListImageulli{float:left;}
#wapListImageulliaimg:focus,
#wapListImageulliaimg:checked,
#wapListImageulliaimg,
#wapListImageulliaimg:active,
#wapListImageullia,#wapListImageullia:active{cursor:move;}
#wapListImagedl{position:absolute;bottom:10px;right:0;}
#wapListImagedlspan{overflow:hidden;width:10px;height:10px;background-color:#900;display:inline-block;}
#wapListImagedlspan.selected{background-color:#000;}
</style>
</head>
<body>
<divid="k">
<divid="wapListImage">
<ul>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"target="_black"><imgsrc="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
<!--<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"target="_black"><imgsrc="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>-->
</ul>
<dl>
<spanclass="selected">1</span>
<span>2</span>
<span>3</span>
<!--<span>4</span>
<span>5</span>
<span>6</span>-->

</dl>
</div>
</div>
<divstyle="height:200px;"></div>
<divid="wapListImage1">
<ul>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"target="_black"><imgsrc="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
<li><ahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"hrefto="ddd"><imgsrc="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
</ul>
</div>
<scripttype="text/javascript">
;(function(w,d){
vardevice=(/android|webos|iphone|ipad|ipod|blackberry|iemobile|operamini/i.test(navigator.userAgent.toLowerCase()));
functionWapImage(){
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":
vartouch=event.touches[0];
case"mousedown":
if(lib.page.isDown)return;
lib.page.isDown=true;
lib.page.sTime=lib.page.eTime=newDate().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":
vartouch=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();
returnfalse;
}
varchangeX=lib.point.pageX1-lib.point.pageX2;
varchangeY=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;
}


}elseif(Math.abs(changeY)>Math.abs(changeX)){//上下事件

}else{//长按或点击

}
break;
case"mouseup":
case"touchend":
if(!lib.page.isDown)return;
lib.page.eTime=newDate().getTime();
lib.page.mleft=parseFloat(lib.page.domUL.style.marginLeft);
lib.page.mleft=lib.page.mleft?lib.page.mleft:0;

varchangeX=lib.point.pageX1-lib.point.pageX2;
varchangeY=lib.point.pageY1-lib.point.pageY2;
if(Math.abs(changeX)>Math.abs(changeY)){//左右事件

event.preventDefault();
lib.Event.move.call(this,lib);

}elseif(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"){
vara=lib.page.liList[lib.page.index].getElementsByTagName("a")[0];
if(typeofa.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(vari=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(varn=0;n<lib.page.prevId.length;n++){
////clearInterval(lib.page.prevId[n]);
//};
//lib.page.prevId=[];
clearInterval(lib.page.prevId);
lib.page.prevId=null;
//varleft=(lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
varyu=Math.abs(parseInt(lib.page.domUL.style.marginLeft));
while(true){
if(yu==0){
yu=lib.page.bodyWidth;
break;
}elseif(yu<0){
yu=Math.abs(yu);
break;
}
yu=yu-lib.page.bodyWidth
}
//varleft=(lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
varleft=yu/lib.options.speed;
varc=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(varn=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(varn=0;n=lib.page.nextId.length;n++){
////clearInterval(lib.page.nextId[0]);
//}
clearInterval(lib.page.nextId);
lib.page.nextId=null;
//lib.page.nextId=[];
//varleft=(lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
//varleft=(lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
varyu=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;
}elseif(yu<0){
yu=lib.page.bodyWidth-Math.abs(yu);
break;
}
yu=yu-lib.page.bodyWidth
}
//varleft=(lib.page.bodyWidth-yu)/lib.options.speed;
varleft=yu/lib.options.speed;
varc=0,id;
if(lib.page.index==0){
lib.page.flag=false;
return;
}
varml=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(varn=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){
varh=Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))
h=h/70;

varhi=0;
varhid;
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);
}elseif(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){
varindex=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++;
}elseif(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)
varindex=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(variinthis.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";
}
//returntemp;
},
bindEvent:function(){
varlib=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(vari=0;i<this.page.liList.length;i++){
varitem=this.page.liList[i];
varimg=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){
varlength=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(vari=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);

}
};
varloaded=function(){
w.WapImage=newWapImage();
w.WapImages=newWapImage();
};
(function(){
if(d.body){
loaded();
}else{
if(d.addEventListener){
d.addEventListener("DOMContentLoaded",function(){
d.removeEventListener("DOMContentLoaded",arguments.callee,false);
loaded();
},false);
}elseif(d.attachEvent){
d.attachEvent("onreadystatechange",function(){
if(d.readyState==="complete"){
d.detachEvent("onreadystatechange",arguments.callee);
loaded();
}
});
}
}
})();
})(window,document,undefined);

window.onload=function(){
varobj={
dom:document.getElementById("wapListImage"),
isupdate:true,
time:3000,
isfor:true,
leftOrright:"left",
callBack:function(obj){
varspan=document.getElementById("wapListImage").getElementsByTagName("dl")[0].getElementsByTagName("span");
for(vark=0;k<span.length;k++){
span[k].className="";
}
span[obj.index-1].className="selected"
//console.log(obj.index)
}
};
WapImage.start(obj);
WapImage.position(2)
varobj2={
dom:document.getElementById("wapListImage1"),
callBack:function(obj){
//console.log(obj.index)
}
};
WapImages.start(obj2);
//varimg=neww.WapImage();
//img.start(obj);
}
</script>
</body>
</html>

用法：

在页面加载完成后

varobj={
dom:document.getElementById("wapListImage"),//dom元素
isupdate:true,//是否自动切换
time:3000,//自动切换的时间毫秒
isfor:true,//是否循环播放，即到最后一张是否直接转入第一张，或到第一张直接转入最后一张
leftOrright:"left",//像左侧自动切换还是像右侧自动切换
callBack:function(obj){//切换成功后回调函数其实有index参数为当前第几张图片

//自己处理
varspan=document.getElementById("wapListImage").getElementsByTagName("dl")[0].getElementsByTagName("span");
for(vark=0;k<span.length;k++){
span[k].className="";
}
span[obj.index-1].className="selected"
//console.log(obj.index)
}
};
WapImage.start(obj);
WapImage.position(2)

如果一个也没需要多个图片切换效果可以再代码中查找varloaded=function()

在其中定义您需要个切换图片个数，并定出名字

如

w.WapImage=newWapImage();
w.WapImages=newWapImage();

在页面加载完后就可以直接调用

WapImage.start()和WapImages.start()

猜你喜欢

【说站】css流式布局的介绍
Oracle 视图 ALL_SCHEDULER_RUNNING_CHAINS 官方解释，作用，如何使用详细说明
C语言#line、#error和#pragma命令，以及_pragma运算符
Linux 引导过程：一步一步探索（简述linux的引导过程）
利用Oracle AWR报表提升数据库性能（oracle awr报表）
太阳照耀起，Oracle辉煌绽放（sun与oracle）
.NET中的异常和异常处理用法分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
618深度复盘：海尔智家的制胜方法论
管控ORACLE数据库权限的全方位实践（oracle的权限管理）
ORA-00309: log belongs to wrong database ORACLE 报错故障修复远程处理
gcc rpm安装
使用Linux控制LED：简单易用的电子控制方法（linux控制led）
MySQL中实现一列数据的累加方法（mysql 一列累加）

zl程序教程

当前栏目

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

相关文章