JS realisiert den automatischen Karusselleffekt (adaptive Bildschirmbreite + Schieben des Touchscreens des Mobiltelefons)_Javascript-Fähigkeiten

In diesem Artikel wird hauptsächlich JS vorgestellt, um den automatischen Karusselleffekt zu realisieren (adaptive Bildschirmbreite + Schieben des Mobiltelefon-Touchscreens).

1. In diesem Artikel wird js + jQuery verwendet Das Karussell muss auf das JQuery-Paket verweisen. Eine weitere Implementierung ist die Implementierung eines adaptiven Karussells und die Transformation in ein glattes Karussell (im Kommentarcode).

2. Sie können die Bilder im Code selbst ändern. Der Stil und die Logik sind alle in js geschrieben.

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>

Das Obige ist das JS, das Ihnen der Herausgeber vorstellt, um den automatischen Karusselleffekt (adaptive Bildschirmbreite + mobiles Touchscreen-Gleiten) zu realisieren, falls Sie welche haben Fragen Bitte hinterlassen Sie mir eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!

Das obige ist der detaillierte Inhalt vonJS realisiert den automatischen Karusselleffekt (adaptive Bildschirmbreite + Schieben des Touchscreens des Mobiltelefons)_Javascript-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!