滑动效果

[javascript]代码库

<script type="text/javascript" src="http://weixin.0750sms.com/tpl/Wap/default/common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://weixin.0750sms.com/tpl/Wap/default/common/js/t33/swipe.js"></script>
<div class="" style="width:90%;overflow:hidden;">
		<div id="navList_box" class="" style="width:100%;overflow:hidden;">
			<ul >
				<li data-index="2" style="">
					<div style="width:100%;height:50px;background-color:#090">asdf</div>
				</li>
				<li data-index="3" style="">
					<div style="width:100%;height:50px;background-color:#090">zxcv</div>
				</li>
				<li data-index="3" style="">
					<div style="width:100%;height:50px;background-color:#090">1234</div>
				</li>
			</ul>
			<!-- <ol>
				<a href="javascript:navList_box.prev();">&nbsp;</a>
				<a href="javascript:navList_box.next();">&nbsp;</a>
			</ol> -->
		</div>
	</div>
	<div class="navList-status" id="indtagol"><span class="sel"></span><span class=""></span><span class=""></span></div>
		<script>
			
    $(document).ready(function(){
      window.navList_box = new Swipe(document.getElementById('navList_box'), { auto:3000,
        callback: function(index, elem){
          var lis = $('#indtagol').children();
          lis.removeClass("sel").eq(index).addClass("sel");
        }});
    });
		</script>

.navList-status{width: 94%;height: 3px;bottom: 0;background-color: rgba(51,51,51,0.5);-webkit-transform: translate3d(0,0,0);display: -webkit-box;margin:0px auto;}
.navList-status span {display: block;-webkit-box-flex: 1;height: 100%;overflow: hidden;}
.navList-status span.sel {background-color: #b20000;}