手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行;还有就是用到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="/UploadFiles/2021-04-02/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg">
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()

标签:
图片滚动,css3,js

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

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

暂无“wap图片滚动特效无css3元素纯js脚本编写”评论...