87,993
社区成员
发帖
与我相关
我的任务
分享PC左右单击正常，而手机单击不正常
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>{if $_title!=''}{$_title}{else}{$_sitename}{/if}</title>
<meta name="keywords" content="{if $_keywords!=''}{$_keywords}{else}{$_sitename}{/if}" />
<meta name="description" content="{if $_description!=''}{$_description}{else}{$_sitename}{/if}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="/css/main-wap.css">
<script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="banner">
<ul>
<li><img src="/images/1.jpg" /></li>
<li style='display:none;'><img src="/images/2.jpg" /></li>
<li style='display:none;'><img src="/images/3.jpg" /></li>
<li style='display:none;'><img src="/images/4.jpg" /></li>
<li style='display:none;'><img src="/images/5.jpg" /></li>
</ul>
<div id="left"></div>
<div id="right"></div>
</div>
<script type="text/javascript">
var m = 1;//move direction
var n = 5;//total
var c = 0;//current
var t = setInterval("loadImage()",5000);
function loadImage()
{
var i = c + m * 1;
if(i < 0) i = n - 1;
if(i > 4) i = 0;
$("#banner li").eq(c).fadeOut("slow");
$("#banner li").eq(i).fadeIn("slow");
c = i;
clearInterval(t);
t=setInterval("loadImage()",5000);
}
$("#left").click(function(){m = -1;loadImage();});
$("#right").click(function(){m = 1;loadImage();});
</script>
</body>
</html>
css:
/*全局*/
*{margin:0px; padding:0px;}
BODY{width:100%;height:100%;color:#656D77;font-family:Microsoft YaHei;font-size:12px;text-align:center;}
ul,li{list-style:none;}
a{border:0;}
a:link,a:visited{color:#b2b4b8;text-decoration:none;}
a:hover{color:#FFF;text-decoration:none;}
html {-webkit-text-size-adjust: 100%;}
/*页面*/
#banner{width:100%;height:100%;}
#banner li{position:fixed;top:0;left:0;width:100%;height:100%;}
#banner img{display: block;position: absolute;height:100%;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);-webkit-transform: translate3d(-50%,-50%,0);}
#left{position:absolute;width:50%;height:100%;top:0;left:0;z-index:2000;cursor:pointer;}
#right{position:absolute;width:50%;height:100%;top:0;right:0;z-index:2000;cursor:pointer}
.wrapper{width:95%;margin:0 auto;}
#header{width:100%;height:100%;position:fixed;top:0;left:0;z-index:2002;}
#header .logo{position:absolute;width:240px;height:72px;top:50px;left:50%;margin-left:-120px;}
#header .logo a{display:block;width:240px;height:72px;}
#header .logo img{width:100%;}为什么手机点击左右翻图没有反应，而PC点击左正常
...全文
请发表友善的回复…
发表回复
