JS는 자동 캐러셀 효과를 구현합니다(적응형 화면 너비 + 휴대폰 터치스크린 슬라이딩)_javascript 기술

이 글에서는 자동 캐러셀 효과(적응형 화면 너비 + 휴대폰 터치스크린 슬라이딩)를 구현하기 위한 JS를 주로 소개합니다. 필요한 친구는 참고하면 됩니다.

1 이 글에서는 캐러셀 효과를 구현하기 위해 js+jQuery를 사용합니다. jquery 패키지를 인용해야 하며, 또 다른 구현은 적응형 캐러셀을 구현하고 부드러운 캐러셀을 변환하기 위한 애니메이션입니다(주석이 있는 코드에서).

2. 코드의 그림을 직접 변경할 수 있습니다. 스타일과 로직은 모두 js로 작성되었습니다.

3, html tag code, js code

<p 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>
</p>

 <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({
  //  &#39;transition-timing-function&#39;:&#39;linear&#39;,
  //  &#39;transition-duration&#39;:&#39;800ms&#39;,
  //  &#39;transform&#39;:&#39;translateX(0px)&#39;
  //  })
  // }else{
  //  $(".slider .slides").css({
  //  &#39;transition-timing-function&#39;:&#39;linear&#39;,
  //  &#39;transition-duration&#39;:&#39;800ms&#39;,
  //  &#39;transform&#39;:&#39;translateX(-&#39;+(i+1)*width+&#39;px)&#39;
  //  })
  // }
  // i++;
  // });
  // $(".lastpic").click(function(){
  // if(i==0){
  //  i=len+1;
  //  $(".slider .slides").css({
  //  &#39;transition-timing-function&#39;:&#39;linear&#39;,
  //  &#39;transition-duration&#39;:&#39;800ms&#39;,
  //  &#39;transform&#39;:&#39;translateX(-&#39;+len*width+&#39;px)&#39;
  //  })
  // }else{
  //  $(".slider .slides").css({
  //  &#39;transition-timing-function&#39;:&#39;linear&#39;,
  //  &#39;transition-duration&#39;:&#39;800ms&#39;,
  //  &#39;transform&#39;:&#39;translateX(-&#39;+(i-1)*width+&#39;px)&#39;
  //  })
  // }
  // i--;
  // })
  
  });
 </script>

위는 자동 회전 효과(적응형 화면 너비 + 휴대폰 터치 화면 슬라이딩)를 구현하기 위해 편집기에서 도입한 JS입니다. , 모든 분들께 도움이 되기를 바랍니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 JS는 자동 캐러셀 효과를 구현합니다(적응형 화면 너비 + 휴대폰 터치스크린 슬라이딩)_javascript 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!