左右触屏滑动nav效果代码（移动端）

首先要有三个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>
左右触屏滑动nav效果代码（移动端）

猜你喜欢
