JavaScript实现移动端带transition动画的轮播效果


Posted in Javascript onMarch 24, 2020

JavaScript实现轮播的方式多种多样,桌面的移动端的实现方式都是大同小异的,具体的核心实现原理不外乎下面几个要点。即:

1. 确定播放方向。一般都是横向轮播,当然不排除纵向的需求可能。当然还有反向播放情况,这个自定义。
2. 对第一张图片的处理。如果当前是第一张了,那么如果继续往前面(就是你播放方向的反向)滑动,那么就会出现留白(如果你允许继续滑动的话,不过不允许滑动也没有啥意思了,除非你想来回轮播,这个我在另一篇用jQuery也说明过),此时应该让你的左边显示应该轮播图片的最后一张,实现无缝连接。
3. 对最后一张图片的处理。跟第一张一样,你需要在继续滑动的时候显示第一张图片,实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。

我这里是在移动端的一个轮播效果,纯JavaScript原生实现,应该说很接近工作实际了。请诸位爷上眼。

注意:如果您想实现跟我一样的效果,请务必按我的样式和架构来写

HTML部分

<div id="box">
 <ul id="lilist">
 <li><img src="5.jpg" alt=""></li>
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li>
 <li><img src="1.jpg" alt=""></li>
 </ul>
 <ul id="items">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>

CSS部分

*{ margin: 0;padding: 0; }
 html,body{ height: 100%;}
 #box{
  width: 100%;
  overflow: hidden;
  position: relative;
 }
 #box #lilist{
  /* 宽度根据子元素个数动态确定 */
  /*width: 500%;*/
  position: relative;
  float: left;
  white-space: nowrap;
  list-style: none;
  overflow: hidden;
 }
 #box #lilist li{
  float: left;
  height: 200px;
 }
 #box #lilist li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
 }

 #box #items{
  position: absolute;
  list-style: none;
  width: 30%;
  bottom: 10px;
  left: 35%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
 }
 #box #items li{
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
 }
 #box #items .active{
  background-color: red;
 }

重点来啦,JavaScript原生代码:

window.onload = function(){
var totalli1 = document.querySelectorAll("#box>#lilist>li");
 var totalli2 = document.querySelectorAll("#box>#items>li");

 // 动态改变轮播图宽度
 changewidth();
 function changewidth(){
 var newstyle = document.createElement("style");
 var mycss = "#lilist{ width : "+totalli1.length+"00% }";
  mycss += "#lilist li{ width : "+(100/totalli1.length)+"% }"
 newstyle.innerHTML = mycss;
 document.head.appendChild(newstyle);
 }

 var getbox = document.getElementById("box");
 var getlist = document.getElementById("lilist");
 var startx = 0, endx = 0, disx = 0;
 var listleft = 0, finalx = 0;
 var windowx = document.documentElement.offsetWidth;
 var listx = getlist.offsetWidth;
 var moveindex = 0;
 // 自动轮播控制变量
 var num = 1, index = 0;
 // 先让他左滑
 transforms(getlist,"translateX",-windowx);

 getbox.addEventListener("touchstart",function(event){
 let touch = event.changedTouches[0];
 startx = touch.clientX;
 // 首位位置判断,并重新定位.鼠标刚放上去就要改变位置,不然move移动再改的话会和移动的transform冲突,也不能在鼠标离开时切换,会影响到移动的滑动效果。这个过程中是瞬间完成的,不允许过渡或动画,显得平滑。
 let lastx = Math.round(-transforms(getlist,"translateX")/windowx);
 if(lastx<1){
  lastx = totalli1.length-2;
 }else if(lastx>totalli1.length-2){
  lastx = 1;
 }
 // 移动到指定位置
 transforms(getlist,"translateX",-lastx*windowx);
 // 给 listleft 赋值
 listleft = transforms(getlist,"translateX");
 // 清除过度缓冲
 getlist.style.transition = "none";
 // 清除计时器
 window.clearInterval(timer);
 })
 getbox.addEventListener("touchmove",function(event){
 let touch = event.changedTouches[0];
 endx = touch.clientX;
 disx = endx - startx;
 finalx = disx+listleft;

 transforms(getlist,"translateX",finalx)
 })
 getbox.addEventListener("touchend",function(event){
 let touch = event.changedTouches[0];
 // 滑动的屏宽个数。
 let lastx = 0;
 // ul 距屏幕左侧的距离与屏宽的比例
 lastx = Math.round(-transforms(getlist,"translateX")/windowx);
 if(lastx<=0){
  lastx = 0;
 }else if(lastx>totalli1.length-1){
  lastx = totalli1.length-1;
 }
 transforms(getlist,"translateX",-lastx*windowx);
 getlist.style.transition = "transform 0.3s";
 // 下部红点跟随,获取下标。诸位请注意下面几个数字的含义,4,5,6的意思你们自己思考一下
 moveindex = lastx-1;
 if(lastx==1||lastx==6){
  moveindex = 0;
 }else if(lastx==0||lastx==5){
  moveindex = 4;
 }
 movecircle(moveindex);
 // 重新添加计时器,自动轮播
 timer = window.setInterval(playself,3000);
 // 改变num和index的值,以确定计时器开始位置
 console.log(moveindex+"。。。"+lastx)
 index = moveindex;
 num = lastx;
 })
 // 自动轮播
 var timer = window.setInterval(playself,3000);
 function playself(){
 // 清除过渡残留
 getlist.style.transition = "none";
 if(num==totalli1.length-1){
  transforms(getlist,"translateX",-windowx);
  num = 1;
 }
 // 再添加一个一次性计时器即可分开与 interval 的冲突
 setTimeout(function(){
  transforms(getlist,"translateX",-windowx*(++num));
  getlist.style.transition = "transform 0.5s";
  // 原点跟随移动
  index++;
  if(index==totalli2.length){
  index = 0;
  totalli2[index].classList.add("active");
  }
  movecircle(index);
 },1)
 }
 // 红点移动函数
 function movecircle(getindex){
 for(let i=0;i<totalli2.length;i++){
  totalli2[i].classList.remove("active");
  if(getindex==i){
  totalli2[getindex].classList.add("active");
  }
 }
 }
}

代码还有一些算法部分的瑕疵,本人愚钝,目前只能想到这种方式了,有些变量可能会占用太多内存,希望各位仅作参考,如有大神指出问题所在,万分感谢。最后,诚心感谢有缘人的观看!祝你生活愉快,工作顺利!

总结

到此这篇关于JavaScript实现移动端带transition动画的轮播效果的文章就介绍到这了,更多相关js transition 轮播内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery实现心算练习代码
Dec 06 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
javascript实现滚动条效果
Mar 24 #Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 #Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
js实现小星星游戏
Mar 23 #Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
You might like
建立文件交换功能的脚本(一)
2006/10/09 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
python返回昨天日期的方法
2015/05/13 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python小进度条显示代码
2019/03/05 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Python模块future用法原理详解
2020/01/20 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
浅析python连接数据库的重要事项
2021/02/22 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
商铺消防安全责任书
2014/07/29 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
装配车间主任岗位职责
2015/04/08 职场文书