Maison > Article > interface Web > js implémente un carrousel d'images sur un terminal mobile

js implémente un carrousel d'images sur un terminal mobile

php中世界最好的语言original: 2018-04-19 09:44:231408parcourir

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Document</title>
 <linkrel="stylesheet"href="reset.css"rel="external nofollow">
 <style>
 html,body{
 width:100%;
 overflow-x:hidden;
 }
 html{
 font-size:100px;
 }
 .banner{
 position:relative;
 height:3rem;
 overflow:hidden;
 }
 .banner .wrapper{
 position:absolute;
 top:0;
 left:-100%;
 height:100%;
 }
 .banner .wrapper .slide{
 float:left;
 height:100%;
 background:#eee;
 }
 .banner .wrapper .slide img{
 display:none;
 width:100%;
 height:100%;
 }
 .tip{
 position:absolute;
 left:0;
 bottom:.1rem;
 width:100%;
 height:.16rem;
 text-align:center;
 }
 .tip li{
 display:inline-block;
 margin:0 .03rem;
 width:.16rem;
 height:.16rem;
 background:rgba(0,0,0,0.2);
 border-radius:50%;
 vertical-align:top;
 }
 .tip li.bg{
 background:#007aff;
 }
 </style>
</head>
<body>
 <sectionclass=&#39;banner&#39;>
 <pclass=&#39;wrapper&#39;>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <pclass=&#39;slide&#39;><imgsrc="img/banner5.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner1.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner2.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner3.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner4.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner5.jpg"alt=""></p>
 <pclass=&#39;slide&#39;><imgsrc="img/banner1.jpg"alt=""></p>
 </p>
 <ulclass=&#39;tip&#39;>
 <liclass=&#39;bg&#39;></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </section>
 
 <scriptcharset=&#39;utf-8&#39;src=&#39;zepto.min.js&#39;></script>
 <scriptcharset=&#39;utf-8&#39;>
 //REM
 ~function(){
 document.documentElement.style.fontSize = document.documentElement.clientWidth/640*100 + 'px';
 }()
 //页面中如果自己使用了TOUCH MOVE等原生事件，需要把浏览器的默认行为阻止掉
 $(document).on('touchmove touchstart touchend',function(ev){
 ev.preventDefault();
 })
 //BANNER
 var bannerRender = (function(){
 var winW = document.documentElement.clientWidth,
 maxL = 0,
 minL = 0;
 var $banner = $('.banner'),
 $wrapper = $banner.children('.wrapper'),
 $slideList = $wrapper.children('.slide'),
 $imgList = $wrapper.find('img');
 var step = 1,
 count = 0,
 followTimer = null;
 
 //public fn
 function isSwipe(strX,strY,endX,endY){
 return Math.abs(endX - strX)>30 || Math.abs(endY - strY) > 30)
 }
 function swipeDir(strX,strY,endX,endY){
 return Math.abs(endX - strX)>=Math.abs(endY - strY)?(endX - strX>0?'right':'left'):(endY - strY>0?'down':'up');
 }
 //touch start
 function dragStart(ev){
 var point = ev.touches[0];
 $wrapper.attr({
  strL:parseFloat($wrapper.css('left')),
  strX:point.clientX,
  strY:point.clientY,
  isMove:false,
  dir:null,
  changeX:null
 })
 }
 //touch move
 function dragIng(ev){
 var point = ev.touches[0];
 var endX = point.clientX,
  endY = point.clientY,
  strX = parseFloat($wrapper.attr('strX')),
  strY = parseFloat($wrapper.attr('strY')),
  strL = parseFloat($wrapper.attr('strL')),
  changeX = endX - strX;
 //计算出是否滑动以及滑动的方向：只有是左右滑动才进行处理
 var isMove = isSwipe(strX,strY,endX,endY),
  dir = swipeDir(strX,strY,endX,endY);
 if(isMove && /(left|right)/i.test(dir)){
  $wrapper.attr({
  isMove:true,
  dir:dir,
  changeX:changeX
  });
  var curL = strL+changeX;
  curL = curL>maxL?maxL:(curL<minL?minL:curL);
  $wrapper[0].style.webkitTransitionDuration=&#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,curL);
 }
 }
 //touch end
 function dragEnd(){
 var isMove = $wrapper.attr(&#39;isMove&#39;),
  dir = $wrapper.attr(&#39;dir&#39;),
  changeX=parseFloat($wrapper.attr(&#39;changeX&#39;));
 if(isMove && /(left|right)/i.test(dir)){
  if(Math.abs(changeX)>=winW/2){
  if(dir==='left'){
  step++;
  }else{
  step--;
  }
  }
 }
 
 $wrapper[0].style.webkitTransitionDuration = '.2s';
 $wrapper.css('left',-step*winW);
 lazyImg();
 //动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
 window.clearTimeout(followTimer)
 followTimer = window.setTimeout(function(){
  if(step===0){
  $wrapper[0].style.webkitTransitionDuration = '0s';
  $wrapper.css('left',-(count-2)*winW);
  step = count-2;
  lazyImg();
  }
  if(step===count-1){
  $wrapper[0].style.webkitTransitionDuration = '0s';
  $wrapper.css('left',-winW);
  step = 1;
  lazyImg();
  }
  window.clearTimeout(followTimer)
 },200)
 
 }
 //图片延迟加载，让当前的活动块及相邻的两个活动块进行加载
 function lazyImg(){
 var $cur = $slideList.eq(step),
  $tar = $cur.add($cur.prev()).add($cur.next());
 $tar.each(function(index,item){
  var $img = $(item).children('img');
  if($img.attr('isLoad')==='true'){
  //ATTR存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
  return;
  }
  var oImg = new Image;
  oImg.src = $img.attr('src');
  oImg.onload = function(){
  $img.attr({
  src:this.src,
  isLoad:true
  }).css('display','block')
  oImg = null;
  }
 })
 
 }
 
 return{
 init:function(){
  //init css style
  count = $slideList.length;
  minL = -($slideList.length-1)*winW;
  $wrapper.css('width',$slideList.length*winW);
  $slideList.css('width',winW);
  //lazy img
  lazyImg();
  $banner.on('touchstart',dragStart).on('touchmove',dragIng).on('touchend',dragEnd)
 }
 }
 })()
 
 bannerRender.init();
 </script>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation JS de la validation des données et de la soumission du formulaire de case à cocher

Explication détaillée de l'utilisation de vue.js deux- liaison de manière

Comment convertir des nombres et des chaînes en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php vue.js 字符串 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Vue implémente la fonction de cliquer sur l'image pour l'agrandir (avec code)Article suivant：Vue implémente la fonction de cliquer sur l'image pour l'agrandir (avec code)

Articles Liés

Voir plus