扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >原生js封装无缝轮播功能
  • 747

0
分享到

原生js封装无缝轮播功能

2024-04-02 19:04:59 747人浏览 独家记忆
摘要

原生js封装无缝轮播插件，供大家参考，具体内容如下 说明： 这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己

原生js封装无缝轮播插件，供大家参考，具体内容如下

说明：

这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己的js文件中添加两行代码即可在网页中实现一个基本的无缝轮播图效果。

基本使用步骤为：获取dom元素数组、向轮播对象中传参、轮播对象调用自动轮播方法。

除基本的定时器自动轮播功能外，该程序还支持设置过渡动画时间、设置鼠标移入元素自动轮播停止、设置点击左右侧边按钮时轮播、设置点击下方按钮时轮播功能。

该程序不需要依赖CSS、html文件、但需要你的css、html布局遵循一定的规则。

注意该程序不支持曲线过渡速度、且在将浏览器切换浏览器窗口后有时会出现轮播图错乱的bug，暂时找不到问题的所在。

该程序仅是我一个初学者对无缝轮播函数的简单封装，仅能够做学习和参考使用。

下面除轮播代码外，我还会给出示例程序。

运行效果：

思路：

根据轮播的方向确定所有轮播图元素的排列顺序，如果当前轮播图已到达所有轮播图的边界，则将相对方向上的最后一张轮播图瞬间移动到相应位置。
使用这种方法实现轮播图所需要的最少轮播图数为3张，针对轮播图数量为一张和两张的情况则需要对其单独处理，一张情况下，复制添加两张和当前轮播图相同的轮播图元素，两张情况下，需要按顺序对当前轮播图进行复制添加。

编译环境：

Chrome 86.0.4240.183

代码：

slide.js 封装轮播图代码


(function(window, undefined) {
 
 // 获取元素css属性值
 function getCss(elem, attr) {
  return elem.currentStyle ? 
   elem.currentStyle[attr] : 
   window.getComputedStyle(elem, null)[attr];
 }
 
 // 去除字符串中的非数字，不包括负号
 function toInt(str) {
  var rex = /[^0-9]/ig;
  return Number((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
 }
 
 // 封装动画函数，参数：dom对象、css属性值对象、动画执行时间、动画完成后回调
 function animation(elem, params, speed, callback) {
  for (var param in params) {
   (function(param) {
    
    var elemValue = toInt(getCss(elem, param)),
     targetValue = toInt(params[param]),
     currentDis = elemValue,
     unit = params[param].substr(params[param].indexOf('[A-Za-z]+') - 1);
    
    if (params[param].length > 2) {
     var prefix = params[param].substr(0, 2);
     
     if (prefix === '+=')
      targetValue = elemValue + targetValue;
     else if (prefix === '-=')
      targetValue = elemValue - targetValue;
    }
    
    var dis = (targetValue - elemValue) / speed,
     sizeFlag = targetValue < elemValue;
    
    var timer = setInterval(function() {
     
     elemValue = toInt(getCss(elem, param));
     
     if (sizeFlag) {
      if (currentDis <= targetValue) {
       clearInterval(timer);
       elem.style[param] = targetValue + unit;
      } else {
       currentDis += dis;
       elem.style[param] = currentDis + unit;
      }
     }
     else {
      if (currentDis >= targetValue) {
       clearInterval(timer);
       elem.style[param] = targetValue + unit;
      } else {
       currentDis += dis;
       elem.style[param] = currentDis + unit;
      }
     }
    }, 1);
    
   })(param);
  }
  
  if (typeof callback === 'function')
   callback();
 };
 
 
 // 向右轮播数组移动
 function rightRoundArrayMove() {
  
  var winsLen = wins.length;
  var lastWin = wins[winsLen - 1];
  
  for (var i = winsLen - 1; i > 0; i--) 
   wins[i] = wins[i - 1];
  
  wins[0] = lastWin;
 }
 
 // 向左轮播
 function rightRound(time) {
  
  rightRoundArrayMove();
  
  wins.forEach(function(win, index) {
   (index === 0) ? 
    win.style.left = index * winWidth - winWidth + 'px' :
    animation(win, {left: '+=' + winWidth + 'px'}, time ? time : animationTime);
  });
 }
 
 // 向右轮播
 function leftRound(time) {
  
  var winsLen = wins.length;
  var firstWin = wins[0];
  
  for (var i = 0; i < winsLen - 1; i++)
   wins[i] = wins[i + 1];
   
  wins[winsLen - 1] = firstWin;
  
  wins.forEach(function(win, index) {
   (index === wins.length - 1) ? 
    win.style.left = index * winWidth - winWidth + 'px' :
    animation(win, {left: '-=' + winWidth + 'px'}, time ? time : animationTime);
  });
 }
 
 
 var 
  // wins, btns, sbtns用于保存构造函数的参数
  wins, 
  btns, 
  sbtns, 
  // 窗口的宽度
  winWidth,
  // 过渡动画时间(毫秒)，默认为100
  animationTime = 100,
  // 点击按钮轮播间隔
  clickInterval = animationTime << 2,
  // 保存自动轮播定时器、定时器间隔、是否向右轮播
  autoRoundTimer,
  qinterval,
  qisRight,
  // slide构造函数，参数：窗口数组，按钮数组，侧边按钮数组
  slide = function(wins, btns, sbtns) {
   return new slide.prototype.init(wins, btns, sbtns);
  };
  
 
 slide.prototype = {
  
  // 初始化窗口元素
  init: function(awins, abtns, asbtns) {
   
   if (!awins)
    throw new Error('The window array cannot be empty.');
   
   wins = Object.values(awins), btns = abtns, sbtns = asbtns;
   
   // 处理窗口少于3个的情况
   if (wins.length === 1) {
    var winParent = wins[0].parentnode;
    var winHTML = wins[0].outerHTML;
    winParent.innerHTML += winHTML + winHTML;
    wins = Object.values(winParent.children);
   }
   else if (wins.length === 2) {
    var winParent = wins[0].parentNode;
    winParent.innerHTML += wins[0].outerHTML + wins[1].outerHTML;
    wins = Object.values(winParent.children);
   }
   
   winWidth = wins[0].offsetWidth;
   
   wins.forEach(function(win, index) {
    win.style.position = 'absolute';
    win.index = index;
   });
   
   rightRoundArrayMove();
   
   wins.forEach(function(win, index) {
    win.style.left = index * winWidth - winWidth + 'px';
   });
  },
  
  // 设置过渡动画时间
  setAnimationTime: function(time) {
   animationTime = time;
   clickInterval = animationTime << 2;
  },
  
  // 自动轮播，参数：轮播时间间隔、是否为向右轮播
  autoRound: function(interval, isRight) {
   autoRoundTimer = setInterval(function() {
        isRight ? rightRound() : leftRound();
       }, interval);
   qinterval = interval;
   qisRight = isRight;
  },
  
  // 侧边按钮点击，参数为侧边按钮元素数组，该参数可在构造函数中传递或现在传递
  sideBtnClickRound: function(sabtns) {
   
   var leftBtn = sabtns ? sabtns[0] : sbtns[0],
    rightBtn = sabtns ? sabtns[1] : sbtns[1];
   
   var isclick= true;
   leftBtn.onclick = function () {
    if(isclick) {
     isclick= false;
     rightRound();
     setTimeout(function() { 
      isclick = true;
     }, clickInterval);
    }
   };
   
   rightBtn.onclick = function () {
    if(isclick) {
     isclick= false;
     leftRound();
     setTimeout(function() {
      isclick = true;
     }, clickInterval);
    }
   };
  },
  
  // 普通按钮点击，参数：普通按钮数组、回调
  btnsClickRound: function(abtns, callback) {
   
   var ibtns = abtns ? abtns : btns;
   
   var isclick= true;
   
   ibtns.forEach(function(btn, index) {
    btn.onclick = function() {
     if(isclick) {
      isclick= false;
      
      if (typeof callback === 'function')
       callback(ibtns, btn, index);
      
      var poor = index - wins[1].index;
      var count = Math.abs(poor);
      if (poor < 0) {
       var absPoor = count;
       var timer = setInterval(function() {
        console.log((absPoor + 1))
           rightRound(animationTime / (absPoor + 2));
           if ((--count) === 0) 
            clearInterval(timer);
          }, animationTime);
      }
      else if (poor > 0) {
       var timer = setInterval(function() {
           leftRound(animationTime / (poor + 2));
           if ((--count) === 0) 
            clearInterval(timer);
          }, animationTime);
      }
      
      setTimeout(function() {
       isclick = true;
      }, clickInterval << 1);
     }
    }
   });
  },
  
  // 设置鼠标移入取消自动轮播，参数：移入的元素、移入元素回调、移出元素回调
  setOverStop: function(box, overCallback, outCallback) {
   box.onmouseover = function(e) {
    clearInterval(autoRoundTimer);
    
    if (typeof overCallback === 'function')
     overCallback(e);
   }
   box.onmouseout = function(e) {
    slide.prototype.autoRound(qinterval, qisRight);
    
    if (typeof outCallback === 'function')
     outCallback(e);
   }
  }
 }
 
 slide.prototype.init.prototype = slide.prototype;
 window.slide = _slide = slide;
 
})(window);

test.js 测试示例js代码：


onload = function() {
 
 var wins = document.querySelectorAll('.wins > li');
 var btns = document.querySelectorAll('.btns > li');
 var sideBtns = document.querySelectorAll('.side-btns > div');
 var box = document.querySelector('.box');
 
 var s = slide(wins, btns, sideBtns); // 创建轮播对象，参数：窗口dom数组、下方按钮dom数组（可选）、
 s.autoRound(2000);   // 设置自动轮播
 s.setAnimationTime(200); // 设置过渡动画时间
 s.setOverStop(box);   // 设置鼠标移入元素时自动轮播停止，参数：移入的dom元素、移入元素回调、移出元素回调
 s.sideBtnClickRound();  // 设置点击侧边按钮时轮播，参数：按钮dom数组（可选）
 s.btnsClickRound();   // 设置下方按钮点击时轮播，参数：按钮dom数组（可选）、回调
}

html、css示例代码


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   
   li {
    list-style: none;
   }
   
   .box {
    width: 1000px;
    height: 400px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
   }
   
   .box > * {
    position: absolute;
   }
   
   .side-btns {
    width: inherit;
    height: 100px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
   }
   
   .side-btns > div {
    width: 50px;
    height: inherit;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    background-color: rgba(0, 0, 0, .3);
    color: white;
    cursor: pointer;
    user-select: none;
   }
   
   .btns {
    width: inherit;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
    position: absolute;
    bottom: 20px;
   }
   
   .btns > li {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 12px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .2);
   }
   
   .wins {
    width: inherit;
    height: inherit;
    display: flex;
   }
   
   .wins > li {
    width: inherit;
    height: inherit;
    flex-grow:0;
    flex-shrink:0;
   }
  </style>
  <script src="js/slide.js"></script>
  <script src="js/test.js"></script>
 </head>
 
 <body>
  <div class="box">
   <div class="side-btns">
    <div class="left-btn">&lt;</div>
    <div class="right-btn">&gt;</div>
   </div>
   
   <ul class="btns">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   
   <ul class="wins">
    <li style="background-color: antiquewhite;">a</li>
    <li style="background-color: aquamarine;">b</li>
    <li style="background-color: green;">c</li>
    <li style="background-color: brown;">d</li>
   </ul>
  </div>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: 原生js封装无缝轮播功能

本文链接: https://lsjlt.com/news/126176.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 原生js封装无缝轮播功能
    原生js封装无缝轮播插件，供大家参考，具体内容如下 说明： 这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己...
    99+
    2024-04-02
  • 原生js如何实现无缝轮播功能
    小编给大家分享一下原生js如何实现无缝轮播功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下说明：这是一个使用原生js、es5语法写出的无缝轮播程序，...
    99+
    2023-06-15
  • 原生js如何实现无缝轮播图效果
    这篇文章主要介绍了原生js如何实现无缝轮播图效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。请看代码<!DOCTYPE h...
    99+
    2024-04-02
  • 如何使用Require.js封装原生js轮播图
    小编给大家分享一下如何使用Require.js封装原生js轮播图，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！index.html页面:<!DOCTYPE html>...
    99+
    2024-04-02
  • 原生Js如何实现简单无缝滚动轮播图
    这篇文章给大家分享的是有关原生Js如何实现简单无缝滚动轮播图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。原简单的滚动轮播代码<html><head>   &...
    99+
    2023-06-15
  • js实现文字无缝轮播
    本文实例为大家分享了js实现文字无缝轮播的具体代码，供大家参考，具体内容如下 所用到的知识点： innerHTML 获取或设置某个对象的内容scrollTop 滚动条滚动的距离，此属...
    99+
    2024-04-02
  • js如何实现文字无缝轮播
    这篇“js如何实现文字无缝轮播”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js如何实现文字无缝轮播”文章吧。所用到的知识点...
    99+
    2023-07-02
  • 原生Js 实现的简单无缝滚动轮播图的示例代码
       简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算...
    99+
    2024-04-02
  • 如何利用CSS3实现的无缝轮播功能
    这篇文章将为大家详细讲解有关如何利用CSS3实现的无缝轮播功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。无缝轮播的原理图1 . html的架构 :<div class="la...
    99+
    2023-06-08
  • 微信小程序（原生）——轮播图swiper、1秒切换、自动轮播、无缝切换
    一、简介 微信小程序的轮播图制作，且图片不变形。1秒切换、自动轮播、无缝切换 二、案例演示 三、案例代码 index.wxml文件： ...
    99+
    2023-09-02
    微信小程序 小程序
  • 原生js如何实现轮播
    这篇文章主要为大家展示了“原生js如何实现轮播”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“原生js如何实现轮播”这篇文章吧。效果如下：代码如下：<!DO...
    99+
    2024-04-02
  • react怎么实现手机端首页无缝轮播功能
    本篇内容主要讲解“react怎么实现手机端首页无缝轮播功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react怎么实现手机端首页无缝轮播功能”吧!touchstart = ...
    99+
    2023-06-05
  • 原生JS实现层叠轮播图
    小编给大家分享一下原生JS实现层叠轮播图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！HTML:<!DOCTYPE&nbs...
    99+
    2024-04-02
  • JS怎么实现原生轮播图
    小编给大家分享一下JS怎么实现原生轮播图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！CSS部分：*{   ...
    99+
    2024-04-02
  • js原生轮播图插件制作
    本文实例为大家分享了js原生轮播图插件制作的具体代码，供大家参考，具体内容如下 调用时也只需要写一个DIV即可 调用的js部分配置内容： 传入轮播图需显示的位置（div） 传入图...
    99+
    2024-04-02
  • 原生JS实现呼吸轮播图
    今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <...
    99+
    2024-04-02
  • JS原生手写轮播图效果
    目录前言一、手写初级轮播图功能分析实现思路二、优化轮播图增加的功能实现要点三、继续优化思路本文实例为大家分享了JS原生手写轮播图效果的具体代码，供大家参考，具体内容如下 前言 本系列...
    99+
    2022-11-13
    JS 轮播图
  • js如何实现轮播图无缝滚动效果
    这篇文章主要介绍了js如何实现轮播图无缝滚动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先文字说明一下：如果要展示5张图，分别为1,2...
    99+
    2024-04-02
  • 原生js如何实现轮播特效
    这篇文章主要为大家展示了“原生js如何实现轮播特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“原生js如何实现轮播特效”这篇文章吧。首先css代码a{text...
    99+
    2024-04-02
  • js原生Ajax如何封装
    这篇文章主要介绍了js原生Ajax如何封装，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。原理及概念AJAX即“Asynchronous Ja...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作