js implements image carousel on mobile terminal

nbsp;html>
<htmllang>

 <metacharset>
 <metaname>
 <title>Document</title>
 <linkrel>
 <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>


 <sectionclass>
 <pclass>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner5.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner1.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner2.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner3.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner4.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner5.jpg" class="lazy" alt="">
 <pclass><img src="/static/imghwm/default1.png" data-src="img/banner1.jpg" class="lazy" alt="">
 
 <ulclass>
 <liclass>
 <li>
 <li>
 <li>
 <li>
 
 
 
 <scriptcharset>
 <scriptcharset>
 //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>=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();
 

</minl></scriptcharset></scriptcharset></liclass></ulclass></pclass></pclass></pclass></pclass></pclass></pclass></pclass></pclass></sectionclass></linkrel></metaname></metacharset></htmllang>

The above is the detailed content of js implements image carousel on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!