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

wap图片滚动特效无css3元素纯js脚本编写

Posted in Javascript onAugust 22, 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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
Jan 23 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 #Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 #Javascript
js中实现多态采用和继承类似的方法
Aug 22 #Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 #Javascript
字段太多jquey快速清空表单内容方法
Aug 21 #Javascript
seata(1) cv2(1) nacos(1) Android Studio(4) MyBatis(5) 面向接口(1) OpenGL(1) exec(1) Flask Web(1) 三角函数(1)
You might like
PHP静态类
2006/11/25 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP乱码问题，UTF-8乱码常见问题小结
2012/04/09 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
python使用Pycharm创建一个Django项目
2018/03/05 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python树莓派红外反射传感器
2019/01/21 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
韩国CJ食品专卖网：CJonmart
2016/09/11 全球购物
英国折扣零售连锁店：QD Stores
2018/12/08 全球购物
Charles & Colvard官网：美国莫桑石品牌
2019/06/05 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
新生儿未入户证明
2015/06/23 职场文书
消防宣传语大全
2015/07/13 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
Android实现图片九宫格
2022/06/28 Java/Android