首先要有三个js文件,分别是 jquery-1.7.2.min.js 和 owl.carousel.js
演示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>触摸滑动nav</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no,minimum-scale=1.0,initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- <script type="text/javascript" src="js/touchslide.1.1.js"></script> -->
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript">
function size() {
var w = $(window).width() > 640 ? 640 : $(window).width();
var f = w / 640 * 100;
$('html').css('font-size', f + 'px');
}
size();
window.addEventListener('resize', size, false);
</script>
<style type="text/css">
html * {font-family:"Microsoft YaHei","tahoma ","Arial",;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small,strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:none;font-weight:inherit;font-style:inherit;}
cite{font-style:normal;}
strong{font-weight:bold;}
body{color:#fff; line-height:0.22rem; font-size:0.18rem;}
ul,dl,li{list-style-type:none;margin: 0;padding: 0;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;}
a{text-decoration:none;outline:none;color: #fff;} /* hidefocus="hidefocus" <按钮去除虚线>*/ /* text-overflow:ellipsis; white-space:nowrap; overflow:hidden; <li字数超出已省略号代替>*/
a:hover{text-decoration:none;opacity: 0.9;}
label,button{cursor:pointer;}
input,select{font-size:0.16rem; margin:0px; padding:0px;}
input.text,textarea.text{border:1px solid #6189C6;}
.clear{clear:both; line-height:0px; height:0px; font-size:0px;}
.info {width: 6.4rem;margin: auto;text-align: center;}
.list_item_wrapper {position: relative;height: 1rem;width: 100%;overflow: hidden;margin: 1rem auto;}
.list_item_wrapper ul {position: absolute;left: 0;z-index: 1;}
.list_item div{float: left;}
.list_item li {width: 1rem;height:1rem;line-height:1rem;text-align: center;background-color: #00abc1;}
</style>
</head>
<body>
<!--导航-->
<div class="list_item_wrapper">
<ul class="list_item">
<li><span>item1</span></li>
<li><span>item2</span></li>
<li><span>item3</span></li>
<li><span>item4</span></li>
<li><span>item5</span></li>
<li><span>item6</span></li>
<li><span>item7</span></li>
<li><span>item8</span></li>
<li><span>item9</span></li>
<li><span>item10</span></li>
<li><span>item11</span></li>
</ul>
</div>
<script type="text/javascript">
$(".list_item").owlCarousel({
items : 4,
lazyLoad : true,
navigation : false,
pagination:false, //显示下面原点导航
singleItem:false, //单张显示
autoPlay:false, //自动播放
itemsMobile:[1200,4]
});
</script>
</body>
</html>