原生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 >a</li>    <li >b</li>    <li >c</li>    <li >d</li>   </ul>  </div> </body></html>

JavaScript有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

以上是“原生js如何实现无缝轮播功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！