经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
用js实现简单轮播图
来源:jb51  时间:2022/7/4 8:50:52  对本文有异议

本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下

1.实现功能:

2.实现思路:

(1)鼠标放到图片上,显示箭头,用display来做。

(2)动态生成小圆圈。

(3)小圆圈的排他思想

(4)点击小圆圈滚动图片

设置自定义属性:this.setAttribute(name, value);

获取自定义属性:this.getAttribute(name,value);

(5)点击右按钮,滚动一张图片(学习无缝滚动原理)

(6)克隆第一张图片放到图片最后面

li.cloneNode(true) 设置为true为深拷贝。

(7)点击右侧按钮时,小圆圈也做相应地改变

(8)解决bug,点击小圆圈时,要更新num和circle值

(9)写左侧按钮

(10)自动播放功能

 (11)节流阀

防止因为点击过快,轮播图滚动过快。

代码:

(1)html+css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. ? ? <meta charset="UTF-8">
  5. ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. ? ? <title>轮播图</title>
  8. ? ? <style>
  9. ? ? ? ? body {
  10. ? ? ? ? ? ? padding: 0;
  11. ? ? ? ? ? ? margin: 0;
  12. ? ? ? ? }
  13. ? ? ? ? .focus {
  14. ? ? ? ? ? ? position: relative;
  15. ? ? ? ? ? ? width: 400px;
  16. ? ? ? ? ? ? height: 300px;
  17. ? ? ? ? ? ? background-color: pink;
  18. ? ? ? ? ? ? overflow: hidden;
  19. ? ? ? ? ? ? margin: 0 auto;
  20. ? ? ? ? }
  21. ? ? ? ? ul {
  22. ? ? ? ? ? ? position: absolute;
  23. ? ? ? ? ? ? left: 0;
  24. ? ? ? ? ? ? display: block;
  25. ? ? ? ? ? ? width: 2000px;
  26. ? ? ? ? ? ? height: 300px;
  27. ? ? ? ? ? ? padding: 0;
  28. ? ? ? ? ? ? margin: 0;
  29. ? ? ? ? }
  30. ? ? ? ? ul>li {
  31. ? ? ? ? ? ? float: left;
  32. ? ? ? ? ? ? list-style: none;
  33. ? ? ? ? ? ?
  34. ? ? ? ? ? ? width: 400px;
  35. ? ? ? ? ? ? height: 300px;
  36. ? ? ? ? }
  37. ? ? ? ? a {
  38. ? ? ? ? ? ? text-decoration: none;
  39. ? ? ? ? ? ? display: block;
  40. ? ? ? ? ? ? width: 50px;
  41. ? ? ? ? ? ? height: 30px;
  42. ? ? ? ? ? ? border-radius: 70%;
  43. ? ? ? ? ? ? background-color: rgb(137, 132, 146,0.3);
  44. ? ? ? ? ? ? color:darkgrey;
  45. ? ? ? ? ? ? font-weight:bolder;
  46. ? ? ? ? ? ? line-height: 30px;
  47. ? ? ? ? ? ? padding: 10px;
  48. ? ? ? ? ? ? z-index: 1;
  49. ? ? ? ? }
  50. ? ? ? ? .arrow-l {
  51. ? ? ? ? ? ? display: none;
  52. ? ? ? ? ? ? position: absolute;
  53. ? ? ? ? ? ? left: -40px;
  54. ? ? ? ? ? ? top: 140px;
  55. ? ? ? ? ? ? text-align: right;
  56. ?
  57. ? ? ? ? }
  58. ? ? ? ? .arrow-r {
  59. ? ? ? ? ? ? display: none;
  60. ? ? ? ? ? ? position: absolute;
  61. ? ? ? ? ? ? right: -40px;
  62. ? ? ? ? ? ? top: 140px;
  63. ? ? ? ? }
  64. ? ? ? ? .circle {
  65. ? ? ? ? ? ? display: block;
  66. ? ? ? ? ? ? position: absolute;
  67. ? ? ? ? ? ? top: 250px;
  68. ? ? ? ? ? ? left:150px;
  69. ? ? ? ? ? ? width: 60px;
  70. ? ? ? ? ? ? height: 20px;
  71. ? ? ? ? ? ? line-height: 20px;
  72. ? ? ? ? ? ?
  73. ?
  74. ? ? ? ? }
  75. ? ? ? ? ol>li {
  76. ? ? ? ? ? ? float: left;
  77. ? ? ? ? ? ? width: 15px;
  78. ? ? ? ? ? ? height: 15px;
  79. ? ? ? ? ? ? list-style: circle;
  80. ? ? ? ? ? ? color: white;
  81. ? ? ? ? ? ? font-size: 25px;
  82. ? ? ? ? ? ? cursor: pointer;
  83. ? ? ? ? ? ??
  84. ? ? ? ? }
  85. ? ? ? ? .current {
  86. ? ? ? ? ? ? list-style: disc;
  87. ? ? ? ? ? ? color: orange;
  88. ? ? ? ? }
  89. ? ? ? ? img {
  90. ? ? ? ? ? ? width: 400px;
  91. ? ? ? ? ? ? height: 300px;
  92. ? ? ? ? }
  93. ? ? </style>
  94. ? ? <script src="animate.js"></script>
  95. ? ? <script src="轮播图.js"></script>
  96. </head>
  97. <body>
  98. ? ? ? ? ? ? <div class="focus">
  99. ? ? ? ? ? ? ? ? <!-- 左右侧按钮 -->
  100. ? ? ? ? ? ? ? ? <a href="javascript:;" class="arrow-l"></a>
  101. ? ? ? ? ? ? ? ? <a href="javascript:;" class="arrow-r"></a>
  102. ?
  103. ? ? ? ? ? ? ? ? <!-- 图片 -->
  104. ? ? ? ? ? ? ? ? <ul>
  105. ? ? ? ? ? ? ? ? ? ? <li>
  106. ? ? ? ? ? ? ? ? ? ? ? ?<img src="../images/bg1.jpg" alt="">
  107. ? ? ? ? ? ? ? ? ? ? </li>
  108. ? ? ? ? ? ? ? ? ? ? <li>
  109. ? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg2.jpg" alt="">
  110. ? ? ? ? ? ? ? ? ? ? </li>
  111. ? ? ? ? ? ? ? ? ? ? <li>
  112. ? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg3.jpg" alt="">
  113. ? ? ? ? ? ? ? ? ? ? </li>
  114. ? ? ? ? ? ? ? ? ? ? <li>
  115. ? ? ? ? ? ? ? ? ? ? ? ? <img src="../images/bg4.jpg" alt="">
  116. ? ? ? ? ? ? ? ? ? ? </li>
  117. ? ? ? ? ? ? ? ? </ul>
  118. ?
  119. ? ? ? ? ? ? ? ? <!-- 小圆点 -->
  120. ? ? ? ? ? ? ? ? <ol class = "circle">
  121. ?
  122. ? ? ? ? ? ? ? ? </ol>
  123. ? ? ? ? ? ? </div>
  124. </body>
  125. </html>

 (2)js

  1. window.addEventListener('load', function(){?
  2. ? ? // 1.鼠标放到图片上,显示箭头
  3. ? ? var focuss = document.querySelector('.focus');
  4. ? ? var arrowL = document.querySelector('.arrow-l');
  5. ? ? var arrowR = document.querySelector('.arrow-r');
  6. ? ? var num = 0;
  7. ? ? var circle = 0;
  8. ? ? // 10.自动播放轮播图.(比较像右侧按钮)
  9. ? ? var timer = setInterval(function() {
  10. ? ? ? ? // 手动调用点击事件
  11. ? ? ? ? arrowR.click()
  12. ? ? },2000);
  13. ?
  14. ? ? focuss.addEventListener('mouseover', function() {
  15. ? ? ? ? arrowL.style.display = 'block';
  16. ? ? ? ? arrowR.style.display = 'block';
  17. ? ? ? ? // 鼠标经过,清除定时器.
  18. ? ? ? ? clearInterval(timer);
  19. ? ? ? ? timer = null;
  20. ? ? });
  21. ? ? focuss.addEventListener('mouseout', function() {
  22. ? ? ? ? arrowL.style.display = 'none';
  23. ? ? ? ? arrowR.style.display = 'none';
  24. ? ? ? ? // 鼠标离开,打开定时器
  25. ? ? ? ? timer = setInterval(function() {
  26. ? ? ? ? ? ? // 手动调用点击事件
  27. ? ? ? ? ? ? arrowR.click()
  28. ? ? ? ? },2000);
  29. ? ? });
  30. ? ? // 2.动态生成小圆圈.(主要涉及到节点操作.)
  31. ? ? var lis = focuss.querySelector('ul').querySelectorAll('li');
  32. ? ? var ol = focuss.querySelector('ol');
  33. ? ? var focusWidth = lis[0].clientWidth;
  34. ? ? for(var i = 0; i < lis.length; i++) {
  35. ? ? ? ? var li = document.createElement('li');
  36. ? ? ? ? // 记录当前小圆圈的索引号,通过自定义属性来做.
  37. ? ? ? ? li.setAttribute('index', i);
  38. ? ? ? ? ol.appendChild(li);
  39. ? ? ? ? // 3.小圆圈的排他思想:在生成小圆圈的同时,直接绑定点击事件.
  40. ? ? ? ? li.addEventListener('click', function(){
  41. ? ? ? ? ? ? // 除了当前li,其他li都清除掉类名
  42. ? ? ? ? ? ? for(var j = 0; j < ol.children.length; j++) {
  43. ? ? ? ? ? ? ? ? ol.children[j].className = '';
  44. ? ? ? ? ? ? }
  45. ? ? ? ? ? ? this.className = 'current';
  46. ? ? ? ? ? ? // 4.点击小圆圈,滚动图片
  47. ? ? ? ? ? ? var index = this.getAttribute('index');
  48. ? ? ? ? ? ? num = index;
  49. ? ? ? ? ? ? circle = index;
  50. ? ? ? ? ? ? animate(ul, -(focusWidth * index));
  51. ? ? ? ? });
  52. ?
  53. ? ? }
  54. ? ? // 把ol中的第一个孩子的类名设置成current
  55. ? ? ol.children[0].className = 'current';
  56. ? ? // 2.鼠标点击按钮,显示不同的图片。
  57. ? ? var ul = focuss.querySelector('ul');
  58. ? ? // 6.克隆第一张图片放到图片最后面
  59. ? ? var first = ul.children[0].cloneNode(true); // true为深克隆
  60. ? ? ul.appendChild(first);
  61. ? ? var flag = true; ?//设置节流阀.
  62. ? ? arrowR.addEventListener('click', function(){
  63. ? ? ? ? // 无缝滚动
  64. ? ? ? ? if(flag) {
  65. ? ? ? ? ? ? flag = false;
  66. ? ? ? ? ? ? if(num == ul.children.length-1) {
  67. ? ? ? ? ? ? ? ? ul.style.left = 0;
  68. ? ? ? ? ? ? ? ? num = 0;
  69. ? ? ? ? ? ? }
  70. ? ? ? ? ? ? num++;
  71. ? ? ? ? ? ? animate(ul,-(focusWidth * num), function() { ?//利用callback,开启节流阀.
  72. ? ? ? ? ? ? ? ? flag = true;
  73. ? ? ? ? ? ? });
  74. ? ? ? ? ? ? // 点击时,小圆圈也做响应的修改.
  75. ? ? ? ? ? ? circle++;
  76. ? ? ? ? ? ? if(circle == ol.children.length) {
  77. ? ? ? ? ? ? ? ? circle = 0;
  78. ? ? ? ? ? ? }
  79. ? ? ? ? ? ? circleChange();
  80. ? ? ? ? }?
  81. ? ? });
  82. ? ? arrowL.addEventListener('click', function(){
  83. ? ? ? ? if(flag = true) {
  84. ? ? ? ? ? ? flag = false;
  85. ? ? ? ? ? ? if(num == 0) {
  86. ? ? ? ? ? ? ? ? ul.style.left = -(focusWidth * (ul.children.length -1 ) +'px');
  87. ? ? ? ? ? ? ? ? num = ul.children.length -1 ;
  88. ? ? ? ? ? ? }
  89. ? ? ? ? ? ? num--;
  90. ? ? ? ? ? ? animate(ul,-(focusWidth * num), function() {
  91. ? ? ? ? ? ? ? ? flag = true;
  92. ? ? ? ? ? ? });
  93. ? ? ? ? ? ? // 点击时,小圆圈也做响应的修改.
  94. ? ? ? ? ? ? circle--;
  95. ? ? ? ? ? ? if(circle == -1) {
  96. ? ? ? ? ? ? ? ? circle = ol.children.length-1;
  97. ? ? ? ? ? ? }
  98. ? ? ? ? ? ? circleChange();
  99. ? ? ? ? }
  100. ? ? ? ??
  101. ? ? });
  102. ?
  103. ? ? function circleChange(){
  104. ? ? ? ? for(var i = 0; i < ol.children.length; i++) {
  105. ? ? ? ? ? ? ol.children[i].className = '';
  106. ? ? ? ? }
  107. ? ? ? ? ol.children[circle].className = 'current';
  108. ? ? }
  109. ? ??
  110. ?
  111. })

(3)缓动画函数

  1. function animate(obj, target, callback) {
  2. ? ? clearInterval(obj.timer);
  3. ? ? obj.timer = setInterval(function(){
  4. ? ? ? ? var step = (target - obj.offsetLeft) / 10;
  5. ? ? ? ? step = step > 0 ? Math.ceil(step) : Math.floor(step);
  6. ? ? ? ? if(obj.offsetLeft == target) {
  7. ? ? ? ? ? ? clearInterval(obj.timer);
  8. ? ? ? ? ? ? // if(callback) {
  9. ? ? ? ? ? ? // ? ? callback();
  10. ? ? ? ? ? ? // }
  11. ? ? ? ? ? ? call && callback();
  12. ? ? ? ? }
  13. ? ? ? ? obj.style.left = obj.offsetLeft + step + 'px';
  14. ? ? },30)
  15. }

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号