首页
所有分类
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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
BCL3000(2) H-501(1) PL450(1) PL990(2) S500(1) S400(1) 低放电路(1) ICF-SW07(1) ICF-SW7600(1) S700(1)
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Bootstrap每天必学之模态框（Modal）插件
2016/04/26 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
利用Python检测URL状态
2019/07/31 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python 实现二维列表转置
2019/12/02 Python
Python selenium自动化测试模型图解
2020/04/15 Python
一文读懂Python 枚举
2020/08/25 Python
意大利香水和彩妆护肤品购物网站：Ditano
2017/08/13 全球购物
台湾母婴用品购物网站：Infant婴之房
2018/06/15 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
品德评语大全
2014/05/05 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
会计主管竞聘书
2015/09/15 职场文书
读完《骆驼祥子》的观后感！
2019/07/05 职场文书
详解Python中*args和**kwargs的使用
2022/04/07 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
关于vue-router-link选择样式设置
2022/04/30 Vue.js