轮播图类型
这种类型的自动播放和触屏拖动可以使用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);
});
});
