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

2024-02-19 11:35:02 46

$(document).ready(function(){ varlen=$(".sliderli").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设置百分比宽度 $(".slidesli").css({ "width":(100/(len+1)).toString()+"%", "float":"left" }); //给图片设置宽度 $(".responsive").css({ "width":"100%", "height":"inherit" }); //控制点样式 $(".sliderp").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); }elseif(moveX<-50){ 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--; //}) });

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

热门推荐

随机推荐