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实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
Js类的构建与继承案例详解
Sep 15 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHP 输出缓存详解
2009/06/20 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
python求pi的方法
2014/10/08 Python
初步讲解Python中的元组概念
2015/05/21 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python中wx模块的具体使用方法
2020/05/15 Python
python使用列表的最佳方案
2020/08/12 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
新浪网技术部笔试题
2016/08/26 面试题
2014年安全生产目标责任书
2014/07/23 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL