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

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 轮播内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS仿京东移动端手指拨动切换轮播图效果

    如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张

  • 支持移动端原生js轮播图

    直接上代码,自行复制粘贴,本人是新手,欢迎指正. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sca

  • 利用纯js + transition动画实现移动端web轮播图详解

    前言 在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在 我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移

  • JS实现动画兼容性的transition和transform实例分析

    本文实例讲述了JS实现动画兼容性的transition和transform方法.分享给大家供大家参考,具体如下: 今天在开发纯手工js打造图片滚动效果的时候,遇到一件不愉快的兼容事件. 之前js设置图片滚动动画效果如下: var addSlideStyle = function(time, leftWidth) { time = time || 0; leftWidth = leftWidth || 0; return 'transition: all ' + time + 's ease-in

  • js原生实现移动端手指滑动轮播图效果的示例

    如下所示: <!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

  • JavaScript实现移动端轮播效果

    这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码.首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到js中的与触摸操作有关的新事件.其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性. 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,一只手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续触

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

    JavaScript实现轮播的方式多种多样,桌面的移动端的实现方式都是大同小异的,具体的核心实现原理不外乎下面几个要点.即: 1. 确定播放方向.一般都是横向轮播,当然不排除纵向的需求可能.当然还有反向播放情况,这个自定义. 2. 对第一张图片的处理.如果当前是第一张了,那么如果继续往前面(就是你播放方向的反向)滑动,那么就会出现留白(如果你允许继续滑动的话,不过不允许滑动也没有啥意思了,除非你想来回轮播,这个我在另一篇用jQuery也说明过),此时应该让你的左边显示应该轮播图片的最后一张,实现

  • js带缩略图的图片轮播效果代码分享

    本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q

  • Bootstrap实现带暂停功能的轮播组件(推荐)

    最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式.动画效果.轮播时间.开始暂停等功能,在此推荐给大家,供大家参考. 一.效果展示 多说无益,来看一组效果展示图,感受一下! 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以. 6.如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式 淡入淡出 水平滑动 7.再来一张图片定位 二.组件介绍 Orbit是

  • jQuery实现带进度条的轮播图

    本文实例为大家分享了jQuery实现带进度条轮播图的具体代码,供大家参考,具体内容如下 1.html模块 <div class="banner"> <ul> <li style="background: url(img/bg1.jpg) center;"> <img src="img/con1.png" /> <div class="nav"></div>

  • javascript实现花样轮播效果

    本文实例为大家分享了javascript实现花样轮播效果的两种实现方法,供大家参考,具体内容如下 第一种:简单的带按钮的轮播 介绍:左右按钮控制轮播,点击左按钮切换上一张图片,点击右按钮切换下一张 html如下: <div class="box"> <div class="imgbox"> <a><img src="img/banner1.jpg" alt=""></a&g

  • jQuery幻灯片带缩略图轮播效果代码分享

    这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码,幻灯片可以点击下方的缩略图切换,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码. 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <html> <head> <title>带缩略图的jQuery幻灯片轮播效果</title> <link href="css/css.css" rel="stylesheet" type=

  • 带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

  • javascript实现图片轮播效果

    本文实例介绍了javascript实现图片轮播效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0

  • jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

  • JavaScript实现大图轮播效果

    本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下 <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding

随机推荐