服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 如何使用JavaScript实现无缝滚动自动播放轮播图效果

如何使用JavaScript实现无缝滚动自动播放轮播图效果

2021-08-27 15:52FredLiu JavaScript

这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

在一些项目开发中，我们经常需要使用到轮播图，但是没有深入学习的情况下做轮播图是非常困难的。

如何使用JavaScript实现无缝滚动自动播放轮播图效果

思路

分成小问题来解决

1. 动态生成序号12345

如何使用JavaScript实现无缝滚动自动播放轮播图效果

页面有多少li（图片），就有多少序号

2. 点击序号、显示高亮、切换图片

2.1 给序号注册onclick事件

2.2 取消其他序号高亮显示，让当前点击的序号高亮显示

2.3 点击序号，动画的方式切换到当前点击的图片位置（设置自定义属性，记录当前索引，有了索引就可用动画进行移动）

如何使用JavaScript实现无缝滚动自动播放轮播图效果

3. 鼠标放到盒子上的时候显示左右箭头，移开时候隐藏

onmouseenter和onmouseleave

如何使用JavaScript实现无缝滚动自动播放轮播图效果

4. 实现左右箭头播放上一张下一张（无缝滚动）

如何使用JavaScript实现无缝滚动自动播放轮播图效果

5. 隔多少时间自动播放

setInterval 和 element1..click() 联合即可实现

代码： index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title></title>
  7. <style type="text/css">
  8. * {
  9. padding: 0;
  10. margin: 0;
  11. list-style: none;
  12. border: 0;
  13. }
  14.  
  15. body {
  16. margin: 0;
  17. background-color: rgb(55, 190, 89);
  18. }
  19.  
  20. .all {
  21. width: 500px;
  22. height: 200px;
  23. padding: 4px;
  24. margin: 100px auto;
  25. position: relative;
  26. background-color: #fff;
  27. border-radius: 20px;
  28. }
  29.  
  30. .screen {
  31. width: 500px;
  32. height: 200px;
  33. border-radius: 17px;
  34. overflow: hidden;
  35. position: relative;
  36. }
  37.  
  38. .screen li {
  39. width: 500px;
  40. height: 200px;
  41. overflow: hidden;
  42. float: left;
  43. }
  44.  
  45. .screen ul {
  46. position: absolute;
  47. left: 0;
  48. top: 0px;
  49. width: 3000px;
  50. }
  51.  
  52. .all ol {
  53. position: absolute;
  54. right: 180px;
  55. bottom: 10px;
  56. line-height: 20px;
  57. text-align: center;
  58. }
  59.  
  60. .all ol li {
  61. float: left;
  62. width: 20px;
  63. height: 20px;
  64. background: #fff;
  65. border-radius: 10px;
  66. border: 1px solid #ccc;
  67. margin-left: 10px;
  68. cursor: pointer;
  69. opacity: 0.5;
  70. /* 透明度 */
  71. }
  72.  
  73. .all ol li.current {
  74. opacity: 1.0;
  75. }
  76.  
  77. #arr {
  78. display: none;
  79. z-index: 1000;
  80.  
  81. }
  82.  
  83. #arr span {
  84. width: 40px;
  85. height: 40px;
  86. position: absolute;
  87. left: 5px;
  88. top: 50%;
  89. margin-top: -20px;
  90. background: #000;
  91. cursor: pointer;
  92. line-height: 40px;
  93. text-align: center;
  94. font-weight: bold;
  95. font-family: '黑体';
  96. font-size: 30px;
  97. color: #fff;
  98. opacity: 0.5;
  99. border: 1px solid #fff;
  100. border-radius: 5px;
  101. }
  102.  
  103. #arr #right {
  104. right: 5px;
  105. left: auto;
  106. }
  107. </style>
  108. </head>
  109.  
  110. <body>
  111. <div class="all" id='box'>
  112. <div class="screen">
  113. <ul>
  114. <li><img src="images/wf1.jpg" width="500" height="200" /></li>
  115. <li><img src="images/wf2.jpg" width="500" height="200" /></li>
  116. <li><img src="images/wf3.jpg" width="500" height="200" /></li>
  117. <li><img src="images/wf4.jpg" width="500" height="200" /></li>
  118. <li><img src="images/wf5.jpg" width="500" height="200" /></li>
  119. </ul>
  120. <ol>
  121. </ol>
  122. </div>
  123. <div id="arr"><span id="left"><</span><span id="right">></span></div>
  124. </div>
  125. <script src="common.js"></script>
  126. <script src="animate.js"></script>
  127. <script src="index.js"></script>
  128. </body>
  129.  
  130. </html>

index.js

  1. //获取元素
  2. var box = my$('box');
  3. var screen = box.children[0];
  4. var ul = screen.children[0];
  5. var ol = screen.children[1]
  6. //获取箭头
  7. var arr = my$('arr');
  8. var arrLeft = my$('left');
  9. var arrRight = my$('right');
  10. var count = ul.children.length; /* 获取图片数量 还没有放cloneLi，所以数值是5*/
  11. var imgWidth = screen.offsetWidth; /* 获取的图片（盒子）的宽高 */
  12. //1.动态生成序号
  13. for (i = 0; i < count; i++) {
  14. // 在ol内创建li
  15. var li = document.createElement('li');
  16. ol.appendChild(li);
  17. // li内赋予数值
  18. setInnerText(li, i + 1);
  19. li.onclick = liClick;
  20. // 设置标签的自定义属性（创建索引）
  21. li.setAttribute('index', i);
  22. }
  23.  
  24. // 2.点击序号，切换，显示高亮
  25. function liClick() {
  26. // 取消其他的li的高亮，显示当前li高亮
  27. for (i = 0; i < ol.children.length; i++) {
  28. var li = ol.children[i];
  29. li.className = '';
  30. this.className = 'current';
  31. }
  32.  
  33. // 获取的自定义属性是字符串类型，要转成整数
  34. var liIndex = parseInt(this.getAttribute('index'));
  35. animate(ul, -liIndex * imgWidth);
  36. //使得后面定义的全局变量index等于li的属性liIndex
  37. index = liIndex;
  38. }
  39.  
  40. //ol内的第一个li显示高亮色
  41. ol.children[0].className = 'current';
  42.  
  43. //3.鼠标放上去的时候显示箭头
  44. // onmouseover和onmouseout会触发事件冒泡；onmouseleave和onmouseenter不会触发事件冒泡
  45. box.onmouseenter = function () {
  46. arr.style.display = 'block';
  47. clearInterval(timeId);
  48. }
  49.  
  50. box.onmouseleave = function () {
  51. arr.style.display = 'none';
  52. timeId = setInterval(function () {
  53. arrRight.click();
  54. }, 2500)
  55. }
  56.  
  57. // 4.实现上一张，下一张的功能
  58. var index = 0; //第一张图片的索引
  59.  
  60. arrRight.onclick = function () {
  61. // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
  62. if (index === count) {
  63. ul.style.left = '0px';
  64. index = 0;
  65. }
  66.  
  67. // 如果是最后一张图片，不让index++
  68. index++;
  69. // 有5张图片，但是还有一张克隆的图片，克隆图片索引是5
  70. if (index < count) {
  71. //获取图片对应的序号，让序号进行点击
  72. ol.children[index].click();
  73. } else {
  74. animate(ul, -index * imgWidth);
  75. // 取消所有的高亮现实，让第一个序号高亮显示
  76. for (var i = 0; i < ol.children.length; i++) {
  77. var li = ol.children[i];
  78. li.className = '';
  79. }
  80. ol.children[0].className = 'current';
  81. }
  82.  
  83. //
  84. }
  85.  
  86. arrLeft.onclick = function () {
  87. if (index === 0) {
  88. index = count;
  89. ul.style.left = -index * imgWidth + 'px';
  90. }
  91. index--;
  92. ol.children[index].click();
  93. }
  94.  
  95. // 无缝滚动
  96. var firstLi = ul.children[0];
  97. // 克隆li
  98. //cloneNode() 复制节点：参数 true 复制节点中的内容 ;false 只复制当前节点，不复制里面的内容
  99. var cloneLi = firstLi.cloneNode(true);
  100. ul.appendChild(cloneLi)
  101.  
  102. // 5.自动播放
  103. var timeId = setInterval(function () {
  104. // 切换到下一张图片
  105. arrRight.click();
  106. }, 2500)

common.js

  1. function my$(id) {
  2. return document.getElementById(id);
  3. }
  4.  
  5. // 处理浏览器兼容性
  6. // 获取第一个子元素
  7. function getFirstElementChild(element) {
  8. var node, nodes = element.childNodes, i = 0;
  9. while (node = nodes[i++]) {
  10. if (node.nodeType === 1) {
  11. return node;
  12. }
  13. }
  14. return null;
  15. }
  16.  
  17. // 处理浏览器兼容性
  18. // 获取下一个兄弟元素
  19. function getNextElementSibling(element) {
  20. var el = element;
  21. while (el = el.nextSibling) {
  22. if (el.nodeType === 1) {
  23. return el;
  24. }
  25. }
  26. return null;
  27. }
  28.  
  29. // 处理innerText和textContent的兼容性问题
  30. // 设置标签之间的内容
  31. function setInnerText(element, content) {
  32. // 判断当前浏览器是否支持 innerText
  33. if (typeof element.innerText === 'string') {
  34. element.innerText = content;
  35. } else {
  36. element.textContent = content;
  37. }
  38. }
  39.  
  40. // 处理注册事件的兼容性问题
  41. // eventName, 不带on， click mouseover mouseout
  42. function addEventListener(element, eventName, fn) {
  43. // 判断当前浏览器是否支持addEventListener 方法
  44. if (element.addEventListener) {
  45. element.addEventListener(eventName, fn); // 第三个参数 默认是false
  46. } else if (element.attachEvent) {
  47. element.attachEvent('on' + eventName, fn);
  48. } else {
  49. // 相当于 element.onclick = fn;
  50. element['on' + eventName] = fn;
  51. }
  52. }
  53.  
  54. // 处理移除事件的兼容性处理
  55. function removeEventListener(element, eventName, fn) {
  56. if (element.removeEventListener) {
  57. element.removeEventListener(eventName, fn);
  58. } else if (element.detachEvent) {
  59. element.detachEvent('on' + eventName, fn);
  60. } else {
  61. element['on' + eventName] = null;
  62. }
  63. }
  64.  
  65. // 获取页面滚动距离的浏览器兼容性问题
  66. // 获取页面滚动出去的距离
  67. function getScroll() {
  68. var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  69. var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  70. return {
  71. scrollLeft: scrollLeft,
  72. scrollTop: scrollTop
  73. }
  74. }
  75.  
  76. // 获取鼠标在页面的位置，处理浏览器兼容性
  77. function getPage(e) {
  78. var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  79. var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  80. return {
  81. pageX: pageX,
  82. pageY: pageY
  83. }
  84. }
  85.  
  86. //格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
  87. function formatDate(date) {
  88. // 判断参数date是否是日期对象
  89. // instanceof instance 实例(对象) of 的
  90. // console.log(date instanceof Date);
  91. if (!(date instanceof Date)) {
  92. console.error('date不是日期对象')
  93. return;
  94. }
  95.  
  96. var year = date.getFullYear(),
  97. month = date.getMonth() + 1,
  98. day = date.getDate(),
  99. hour = date.getHours(),
  100. minute = date.getMinutes(),
  101. second = date.getSeconds();
  102.  
  103. month = month < 10 ? '0' + month : month;
  104. day = day < 10 ? '0' + day : day;
  105. hour = hour < 10 ? '0' + hour : hour;
  106. minute = minute < 10 ? '0' + minute : minute;
  107. second = second < 10 ? '0' + second : second;
  108.  
  109. return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  110. }
  111.  
  112. // 获取两个日期的时间差
  113. function getInterval(start, end) {
  114. // 两个日期对象，相差的毫秒数
  115. var interval = end - start;
  116. // 求 相差的天数/小时数/分钟数/秒数
  117. var day, hour, minute, second;
  118.  
  119. // 两个日期对象，相差的秒数
  120. // interval = interval / 1000;
  121. interval /= 1000;
  122.  
  123. day = Math.round(interval / 60 / 60 / 24);
  124. hour = Math.round(interval / 60 / 60 % 24);
  125. minute = Math.round(interval / 60 % 60);
  126. second = Math.round(interval % 60);
  127.  
  128. return {
  129. day: day,
  130. hour: hour,
  131. minute: minute,
  132. second: second
  133. }
  134. }

animage.js

  1. // var timerId = null;
  2. // 封装动画的函数
  3. function animate(element, target) {
  4. // 通过判断，保证页面上只有一个定时器在执行动画
  5. if (element.timerId) {
  6. clearInterval(element.timerId);
  7. element.timerId = null;
  8. }
  9.  
  10. element.timerId = setInterval(function () {
  11. // 步进 每次移动的距离
  12. var step = 10;
  13. // 盒子当前的位置
  14. var current = element.offsetLeft;
  15. // 当从400 到 800 执行动画
  16. // 当从800 到 400 不执行动画
  17.  
  18. // 判断如果当前位置 > 目标位置 此时的step 要小于0
  19. if (current > target) {
  20. step = - Math.abs(step);
  21. }
  22.  
  23. // Math.abs(current - target) <= Math.abs(step)
  24. if (Math.abs(current - target) <= Math.abs(step)) {
  25. // 让定时器停止
  26. clearInterval(element.timerId);
  27. // 让盒子到target的位置
  28. element.style.left = target + 'px';
  29. return;
  30. }
  31. // 移动盒子
  32. current += step;
  33. element.style.left = current + 'px';
  34. }, 5);
  35. }

总结

到此这篇关于如何使用JavaScript实现无缝滚动自动播放轮播图效果的文章就介绍到这了,更多相关js无缝滚动自动播放内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://segmentfault.com/a/1190000023691984

  • JavaScript
  • 轮播图
  • 自动播放
  • 无缝滚动

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    格斗 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图