html自动自适应轮播图片,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...

$(document).ready(function() {varlen=$(".slider li").length-1;//给slider设置样式

$(".slider").css({"width":"100%","height":"inherit","overflow":"hidden","display":"inline-block"});//给ul设置宽度

$(".slides").css({"position":"relative","width":((len+1)*100).toString()+"%","margin":"0","padding":"0"});//给li设置百分比宽度

$(".slides li").css({"width":(100/(len+1)).toString()+"%",

"float":"left"});//给图片设置宽度

$(".responsive").css({"width":"100%","height":"inherit"});//控制点样式

$(".slider p").css({"position":"absolute","z-index":"999","cursor":"pointer"});

$(".slider .lastpic").css({"left":"0","margin-top":"7%"});

$(".slider .nextpic").css({"right":"0","margin-top":"7%"});//animate移动

vari= 0;

$(".nextpic").click(function(){

moveNext(i);

});

$(".lastpic").click(function(){

moveLast(i);

});//自动轮播

vartimer=setInterval(function(){

moveNext(i);

},5000);

moveNext= function(n){if(n==len){

i=-1;

$(".slider .slides").animate({right:""},800);

}else{

$(".slider .slides").animate({right:((n+1)*100).toString()+"%"},800);

}

i++;

}

moveLast= function(n){if(n==0){

i=len+1;

$(".slider .slides").animate({right:(len*100).toString()+"%"},800);

}else{

$(".slider .slides").animate({right:((n-1)*100).toString()+"%"},800);

}

i--;

}//手机触摸效果

varstartX,endX,moveX;functiontouchStart(event){vartouch=event.touches[0];

startX=touch.pageX;

}functiontouchMove(event){vartouch=event.touches[0];

endX=touch.pageX;

}functiontouchEnd(event){

moveX=startX-endX;if(moveX>50){

moveNext(i);

}else if(moveX

moveLast(i);

}

}

document.getElementById("slides").addEventListener("touchstart",touchStart,false);

document.getElementById("slides").addEventListener("touchmove",touchMove,false);

document.getElementById("slides").addEventListener("touchend",touchEnd,false);//transition移动固定宽度，无法自适应

//$(".nextpic").click(function(){

//if(i==len){

//i=-1;

//$(".slider .slides").css({

//‘transition-timing-function‘:‘linear‘,

//‘transition-duration‘:‘800ms‘,

//‘transform‘:‘translateX(0px)‘

//})

//}else{

//$(".slider .slides").css({

//‘transition-timing-function‘:‘linear‘,

//‘transition-duration‘:‘800ms‘,

//‘transform‘:‘translateX(-‘+(i+1)*width+‘px)‘

//})

//}

//i++;

//});

//$(".lastpic").click(function(){

//if(i==0){

//i=len+1;

//$(".slider .slides").css({

//‘transition-timing-function‘:‘linear‘,

//‘transition-duration‘:‘800ms‘,

//‘transform‘:‘translateX(-‘+len*width+‘px)‘

//})

//}else{

//$(".slider .slides").css({

//‘transition-timing-function‘:‘linear‘,

//‘transition-duration‘:‘800ms‘,

//‘transform‘:‘translateX(-‘+(i-1)*width+‘px)‘

//})

//}

//i--;

//})

});