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

html标签代码，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>