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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
师范毕业生自荐信
2013/10/17 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
促销活动策划方案
2014/01/12 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2014年护士长工作总结
2014/11/11 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis