js实现移动端轮播图效果


Posted in Javascript onDecember 09, 2020

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

<!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实现移动端轮播图效果

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

Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
小程序实现密码输入框
Nov 16 Javascript
JavaScript递归算法生成树形菜单
Aug 15 #Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 #Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
vue的基本用法与常见指令
Aug 15 #Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 #Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 #Javascript
You might like
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
焦裕禄精神心得体会
2014/09/02 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
vue实现同时设置多个倒计时
2021/05/20 Vue.js
python中mongodb包操作数据库
2022/04/19 Python