触屏拖动

轮播图类型

这种类型的自动播放和触屏拖动可以使用swiper插件很方便的实现

<div class="adapt-img">
<div class="swiper-container swiper-container-horizontal" id="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">
        <a href=""><img src="images/img1.png"></a>
        <div class="tips flex-wrap">
        <div class="flex-fluid">2222222，为吃上演宫心计</div>
        <div>5-30期</div>
        </div>
       </div>
       <div class="swiper-slide">
        <a href="http://www.baidu.com"><img src="images/img1.png"></a>
        <div class="tips flex-wrap">
        <div class="flex-fluid">333333，为吃上演宫心计</div>
        <div>5-30期</div>
        </div>
       </div>
   </div>
   <!-- 如果需要分页器 -->
   <div class="swiper-pagination"></div>
   <!-- 如果需要滚动条 -->
   <div class="swiper-scrollbar"></div>
</div>
<!-- <img src="images/img1.png" alt=""> -->
</div>
</div>

var mySwiper = new Swiper ('.swiper-container', {
   direction: 'horizontal',
   loop: false,
   loopAdditionalSlides:0,
   autoplay:1000,//自动切换时停顿时间，不设置将不会自动切换
   speed:1000,
   autoplayDisableOnInteraction: false,
   initialSlide :0,
   observer:true,//修改swiper自己或子元素时，自动初始化swiper
   observeParents:true,//修改swiper的父元素时，自动初始化swiper 
   pagination: '.swiper-pagination',
   //scrollbar: '.swiper-scrollbar',
 }); 

导航栏类型

类似菜单显示不完全，需要靠拖动实现的，可以使用html5新定义的touch系列事件实现

<div class="nav-bar">
<div class="nav-bar-left">
<ul id="menu_ul" class="tab-nav clearfix">
<li class="nav-item active">
<a href="#">首页</a>
</li>
<li class="nav-item">
<a href="#">发现</a>
</li>
<li class="nav-item">
<a href="#">直播</a>
</li>
<li class="nav-item">
<a href="#">电视剧</a>
</li>
<li class="nav-item">
<a href="#">电影</a>
</li>
<li class="nav-item">
<a href="#">综艺</a>
</li>
<li class="nav-item">
<a href="#">动漫</a>
</li> 
<li class="nav-more"></li>
</ul>
</div>
<div class="tab-nav-more"></div>
</div>

$('div.nav-bar').bind('touchstart',function(e){
    //记录刚开始触摸时位置
       startX = e.originalEvent.changedTouches[0].pageX,
    //根据用户滑动距离移动导航栏
      $('div.nav-bar').bind('touchmove',function(e){
         //获取滑动屏幕时的X,Y
         endX = e.originalEvent.changedTouches[0].pageX,
         //获取滑动距离
         distanceX = endX-startX;
       startX = endX;
         var newScrollLeft = $('div.nav-bar-left').scrollLeft() - distanceX;
         var maxScrollLeft = $('#menu_ul li:last-child').offset().left - $('#menu_ul li:first-child').offset().left + $('#menu_ul li:last-child').width() - $(window).width();
         if(newScrollLeft < 0)
         newScrollLeft = 0;
         if(newScrollLeft > maxScrollLeft)
     newScrollLeft = maxScrollLeft;
         //根据滑动距离改变导航栏的滚动位置
      $('div.nav-bar-left').scrollLeft(newScrollLeft);
      });
    });