欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现移动端轮播图效果

程序员文章站 2023-02-23 23:09:29
本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下

本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>document</title>
 <link rel="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>
 <section class='banner'>
 <div class='wrapper'>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner2.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner3.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner4.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
 <div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
 </div>
 <ul class='tip'>
 <li class='bg'></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </section>

 <script charset='utf-8' src='zepto.min.js'></script>
 <script charset='utf-8'>
 //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 = '0s';
  $wrapper.css('left',curl);
 }



 }
 //touch end
 function dragend(){
 var ismove = $wrapper.attr('ismove'),
  dir = $wrapper.attr('dir'),
  changex = parsefloat($wrapper.attr('changex'));
 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('data-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>

边界判断逻辑可参照下图

js实现移动端轮播图效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。