html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<link rel='stylesheet' href='css/style.css'>
<link rel='stylesheet' href='css/swiper.min.css'>
<script src="js/jquery.1.11.1.js"></script>
<script src="js/swiper.min.js"></script><!--触摸滑屏JS-->
<script src="js/idangerous.swiper.min.js"></script><!--点击li滑屏JS-->
<title>html5手机端手指滑动选项卡滚动切换效果</title>
<style type="text/css">
.yuan_w{
width: 100%;
height: 100%;
padding-left: 37%;
}
.yuan{
width: 10px;
height: 10px;
border-radius: 10px;
background: #888;
border: 1px solid #888;
float: left;
margin: 10px 5px;
}
.yuan_active{
background: #FE6667;
border: 1px solid #FE6667;
}
.min_height{
min-height:500px;/*设置一个最小高度，方便滑屏测试*/
}
</style>
</head>
<body>
<!-- header -->
<header class="favor-header-bar">
<ul class="tabs">
<li class="default"><a href="javascript:void(0);" ></span></li>
<li><a href="javascript:void(0);" >宽带</a></li>
<li><a href="javascript:void(0);" >流量</a></li>
<li><a href="javascript:void(0);" >充值</a></li>
</ul>
</header>
<div class="yuan_w">
<div class="yuan yuan_active"></div>
<div class="yuan"></div>
<div class="yuan"></div>
<div class="yuan"></div>
</div>
<!-- slideTo tab -->
<div class="swiper-container favor-list">
<div class="swiper-wrapper">
<div class="swiper-slide min_height" style="min-height: 500px;">
111111111111111
</div>
<div class="swiper-slide min_height">
222222222222222
</div>
<div class="swiper-slide min_height">
333333333333333
</div>
<div class="swiper-slide min_height">
444444444444444
</div>
</div>
</div>
<script>
//移动端触摸滑屏
var mySwiper = new Swiper('.swiper-container',{
autoHeight: true,
onSlideChangeStart: function(){
//手指还动选项卡，圆点样式改变
$(".yuan_w .yuan_active").removeClass('yuan_active');
$(".yuan_w div").eq(mySwiper.activeIndex).addClass('yuan_active');
//手指滑动,小选项卡样式改变
$(".tabs .default").removeClass('default');
$(".tabs li").eq(mySwiper.activeIndex).addClass('default');
}
});
//pc端点击滑屏
$(".tabs li").on('click',function(e){
e.preventDefault();
$(".tabs .default").removeClass('default');
$(this).addClass('default');
mySwiper.swipeTo($(this).index());
});
$(".tabs li").click(function(e){
e.preventDefault();
});
</script>
</body>
</html>
