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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
JS出现失效的情况总结
Jan 20 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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+xslt在windows平台上
2006/10/09 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php单例模式的简单实现方法
2016/06/10 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
js option删除代码集合
2008/11/12 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Python的高阶函数用法实例分析
2019/04/11 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
标准导师推荐信(医学类)
2013/10/28 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
父母对孩子说的话
2014/04/12 职场文书
2014年基建工作总结
2014/12/12 职场文书
停课通知书
2015/04/24 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle