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

1、本文使用js+jquery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。

2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。

3、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>

以上所述是小编给大家介绍的js实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，希望对大家有所帮助