JS 腾挪端的焦点图触屏滑动
JS 移动端的焦点图触屏滑动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JS 移动端的焦点图触屏滑动</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/TouchSlide.1.0.js"></script>
<style>
.focus{ width:320px; height:140px; margin:20px auto 0 auto; position:relative; overflow:hidden; }
.focus .hd{ width:100%; height:5px; position:absolute; z-index:1; bottom:0; text-align:center; }
.focus .hd ul{ overflow:hidden; display:-moz-box; display:-webkit-box; display:box; height:5px; background-color:rgba(51,51,51,0.5); }
.focus .hd ul li{ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; }
.focus .hd ul .on{ background:#FF4000; }
.focus .bd{ position:relative; z-index:0; }
.focus .bd li img{ width:100%; height:150px; }
.focus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
</style>
</head>
<body>
<div id="focus" class="focus">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img src="img/m1.jpg" /></a></li>
<li><a href="#"><img src="img/m2.jpg" /></a></li>
<li><a href="#"><img src="img/m3.jpg" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
TouchSlide({
slideCell:"#focus",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPlay:true,//自动播放
autoPage:true //自动分页
});
</script>
</body>
</html>
效果图：