版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/83153028
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="copyright" content="">
<meta name="Keywords" content="">
<meta name="description" content="">
<title>TouchSlide左循环滑动 </title>
</head>
<script src="../TouchSlide.1.1.js"></script>
<style type="text/css">
/* css 重置 */
body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
img { border:0; margin: 0; padding: 0; }
body { color: #000; -webkit-user-select: none; }
a{text-decoration:none;color:#000;}
body{ background:#f4f4f4; }
#content{background:#fff; }
.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4; position:relative; }
.tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden; }
.tabBox .hd ul li{ float:left; padding:0 10px; color:#666; display:block; }
.tabBox .hd ul .on{ border-bottom:2px solid #F5AB38; }
.tabBox .bd li{ height:333px; line-height:333px; }
</style>
<body>
<div id="leftTabBox" class="tabBox">
<div class="hd">
<ul>
<li>国内</li>
<li>国际</li>
<li>时事</li>
</ul>
</div>
<div class="bd">
<ul>
<li>官方明确感染H7N9高危人群</li>
</ul>
<ul>
<li>日:沈阳军区部队开赴中朝边境</li>
</ul>
<ul>
<li>农业占GDP低政府支持力度大</li>
</ul>
</div>
</div>
<script type="text/javascript">
TouchSlide({ slideCell:"#leftTabBox",effect:"leftLoop" });
</script>
</body>
</html>借鉴http://www.SuperSlide2.com/TouchSlide/demo.html