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

<div class="slider">  //轮播箭头 <p class="lastpic"><img src="../images/prev.png"></p> <p class="nextpic"><img src="../images/next.png"></p> //轮播图片 <ul id="slides" class="slides clearfix"> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> </ul></div>

 <script type="text/javascript">  $(document).ready(function() {  var len = $(".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移动  var i = 0;  $(".nextpic").click(function(){   moveNext(i);  });  $(".lastpic").click(function(){   moveLast(i);  });  //自动轮播  var timer = 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--;  }  //手机触摸效果  var startX,endX,moveX;  function touchStart(event){   var touch = event.touches[0];   startX = touch.pageX;  }  function touchMove(event){   var touch = event.touches[0];   endX = touch.pageX;  }  function touchEnd(event){   moveX = startX - endX;   if(moveX>50){   moveNext(i);   }else if(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--;  // })    }); </script>