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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
JS实现transform实现扇子效果
Jan 17 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
咖啡厅创业计划书范本
2014/01/22 职场文书
摄影助理岗位职责
2014/02/07 职场文书
运动会800米加油稿
2014/02/22 职场文书
企业安全生产标语
2014/06/06 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
大学生见习报告总结
2014/11/04 职场文书