<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mobiletab.css"/>
</head>
<body>
<div class="slider">
<div class="slider_title" id="slider_title">
<div class="slider_item">
<a href="javascript:;" class="active slider_a">今天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">明天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">大前天</a>
</div>
<div class="slider_item">
<a href="javascript:;" class="slider_a">大大前天</a>
</div>
</div>
<div class="slider_content">
<div class="slider_widthcontent">
<div class="slider_itemcontent" id="slider_item1">
1
</div>
<div class="slider_itemcontent" id="slider_item2">
2
</div>
<div class="slider_itemcontent" id="slider_item3">
3
</div>
<div class="slider_itemcontent" id="slider_item4">
4
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mobiletab.js" type="text/javascript" charset="utf-8"></script>
</html>
window.onload=function(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px';
}
var windowwidth = $(window).width();
$(function(){
$('.slider_itemcontent').css('width',windowwidth);
//点击
var oldflag=0;var _index;
$('.slider_item').bind('click',function(e){
$(this).children('a').addClass('active');
$(this).siblings().children('a').removeClass('active');
var leftlength = $(this).index()-oldflag;
if(leftlength>0){
$('.slider_widthcontent').animate({
left:-windowwidth*leftlength
},1000)
}
else if(leftlength==0){
$('.slider_widthcontent').animate({
left:0
},1000)
}
})
})
var startx,starty,currentactive;
var slider_a = document.getElementsByClassName('slider_a');
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
function getDirection(startx,starty,endx,endy){
var angx =endx-startx;
var angy =endy-starty;
var result = 0;
if(Math.abs(angx)<2&&Math.abs(angy)<2){
return result;
}
var angle = getAngle(angx,angy);
if(angle>-135&&angle<=-45){
result=1;
}else if(angle>45&&angle<135){
result = 2;
}else if((angle>=135&&angle<=180)||(angle>=-180&&angle<-135)){
result= 3 ;
}else if(angle>=-45&&angle<=45){
result = 4;
}
return result;
}
document.addEventListener('touchstart',function(e){
startx = e.touches[0].pageX;
starty=e.touches[0].pageY;
},false);
document.addEventListener('touchend',function(e){
var endx,endy;
endx=e.changedTouches[0].pageX;
endy=e.changedTouches[0].pageY;
var direction=getDirection(startx,starty,endx,endy);
switch(direction){
case 0:
// alert('none');
break;
case 1:
// alert('up');
break;
case 2:
// alert('down');
break;
case 3:
var currentactive;
for(var i=0;i<$('.slider_a').length;i++){
if($('.slider_a:eq('+i+')').hasClass('active')){
currentactive=i;
$('.slider_a:eq('+i+')').removeClass('active');
if(i<3){
i++;
currentactive=i;
}
$('.slider_a:eq('+i+')').addClass('active');
}
}
$('.slider_widthcontent').animate({
left:-windowwidth*currentactive
},1000)
// alert('left');
break;
case 4:
// alert('right');
var currentactive;
for(var i=0;i<$('.slider_a').length;i++){
if($('.slider_a:eq('+i+')').hasClass('active')){
currentactive=i;
$('.slider_a:eq('+i+')').removeClass('active');
if(i>0){
i--;
currentactive=i;
}
$('.slider_a:eq('+i+')').addClass('active');
}
}
$('.slider_widthcontent').animate({
left:-windowwidth*currentactive
},1000)
break;
default:
}
},false)