电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

JS做到自动轮播图效果(自适应屏幕宽度+手机触屏滑动)_javascript技巧

2020-10-26 12:47:02 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要讲解了JS解决问题自动轮播图效果(自适应屏幕宽度+手机触屏滑动),必需的朋友可以参阅下

1、本文用作js+jQuery借助轮播图,须要提到jquery自带,另种发挥作用分别是animate借助自适应的轮播,以及transform光滑轮播(在释义代码中)。

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

3、html标签代码,js代码


<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({  //  '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借助于自动轮播图效果(自适应屏幕宽度+手机触屏滑动),想要对大家有所为了让,如果大家有任何疑问请给我facebook,小编会及时无视大家的。在此也非常感谢大家对脚本之家网站的大力支持!

以上就是JS充分利用自动轮播图效果(自适应屏幕宽度+手机触屏滑动)_javascript技巧的概要内容,更多代为重视php中文网其它特别文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152