JavaScript教程之移动端轮播图效果的实现-js教程-PHP中文网

首页

web前端

js教程

JavaScript教程之移动端轮播图效果的实现

巴扎黑

Aug 17, 2017 pm 04:08 PM

javascriptjs实现

这篇文章主要为大家详细介绍了js实现移动端轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

<!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=&#39;banner&#39;>
 <p class=&#39;wrapper&#39;>
 <!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
 <p class=&#39;slide&#39;><img src="img/banner5.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner1.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner2.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner3.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner4.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner5.jpg" alt=""></p>
 <p class=&#39;slide&#39;><img src="img/banner1.jpg" alt=""></p>
 </p>
 <ul class=&#39;tip&#39;>
 <li class=&#39;bg&#39;></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </section>

 <script charset=&#39;utf-8&#39; src=&#39;zepto.min.js&#39;></script>
 <script charset=&#39;utf-8&#39;>
 //REM
 ~function(){
 document.documentElement.style.fontSize = document.documentElement.clientWidth/640*100 + &#39;px&#39;;
 }()
 //页面中如果自己使用了TOUCH MOVE等原生事件，需要把浏览器的默认行为阻止掉
 $(document).on(&#39;touchmove touchstart touchend&#39;,function(ev){
 ev.preventDefault();
 })
 //BANNER
 var bannerRender = (function(){
 var winW = document.documentElement.clientWidth,
 maxL = 0,
 minL = 0;
 var $banner = $(&#39;.banner&#39;),
 $wrapper = $banner.children(&#39;.wrapper&#39;),
 $slideList = $wrapper.children(&#39;.slide&#39;),
 $imgList = $wrapper.find(&#39;img&#39;);
 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?&#39;right&#39;:&#39;left&#39;):(endY - strY>0?&#39;down&#39;:&#39;up&#39;);
 }
 //touch start
 function dragStart(ev){
 var point = ev.touches[0];
 $wrapper.attr({
  strL:parseFloat($wrapper.css(&#39;left&#39;)),
  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(&#39;strX&#39;)),
  strY = parseFloat($wrapper.attr(&#39;strY&#39;)),
  strL = parseFloat($wrapper.attr(&#39;strL&#39;)),
  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===&#39;left&#39;){
  step++;
  }else{
  step--;
  }
  }
 }

 $wrapper[0].style.webkitTransitionDuration = &#39;.2s&#39;;
 $wrapper.css(&#39;left&#39;,-step*winW);
 lazyImg();
 //动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
 window.clearTimeout(followTimer)
 followTimer = window.setTimeout(function(){
  if(step===0){
  $wrapper[0].style.webkitTransitionDuration = &#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,-(count-2)*winW);
  step = count-2;
  lazyImg();
  }
  if(step===count-1){
  $wrapper[0].style.webkitTransitionDuration = &#39;0s&#39;;
  $wrapper.css(&#39;left&#39;,-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(&#39;img&#39;);
  if($img.attr(&#39;isLoad&#39;)===&#39;true&#39;){
  //ATTR存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
  return;
  }
  var oImg = new Image;
  oImg.src = $img.attr(&#39;src&#39;);
  oImg.onload = function(){
  $img.attr({
  src:this.src,
  isLoad:true
  }).css(&#39;display&#39;,&#39;block&#39;)
  oImg = null;
  }
 })

 }

 return{
 init:function(){
  //init css style
  count = $slideList.length;
  minL = -($slideList.length-1)*winW;
  $wrapper.css(&#39;width&#39;,$slideList.length*winW);
  $slideList.css(&#39;width&#39;,winW);
  //lazy img
  lazyImg();
  $banner.on(&#39;touchstart&#39;,dragStart).on(&#39;touchmove&#39;,dragIng).on(&#39;touchend&#39;,dragEnd)
 }
 }
 })()

 bannerRender.init();
 </script>
</body>
</html>

边界判断逻辑可参照下图

以上是JavaScript教程之移动端轮播图效果的实现的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

See all articles