当前位置:Gxlcms > JavaScript > 如何使用原生JavaScript实现轮播图?代码详解

如何使用原生JavaScript实现轮播图?代码详解

时间:2021-07-01 10:21:17 帮助过:14人阅读

实现原理

1.png

通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果

HTML:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" type="text/css" href="StyleSheet.css">
  6. <title></title>
  7. </head>
  8. <body>
  9. <p id="scroll" class="scroll">
  10. <p id="box" class="box">
  11. <ul id="ul" style="left:-950px;">
  12. <li><img src="images/top_banner_bw01.jpg" width="950" height="438"></li>
  13. <li><img src="images/top_banner_bw02.jpg" width="950" height="438"></li>
  14. <li><img src="images/top_banner_bw03.jpg" width="950" height="438"></li>
  15. <li><img src="images/top_banner_bw04.jpg" width="950" height="438"></li>
  16. <li><img src="images/top_banner_bw05.jpg" width="950" height="438"></li>
  17. </ul>
  18. <ol id="olnavi"></ol>
  19. </p>
  20. <p id="last"></p>
  21. <p id="next"></p>
  22. </p>
  23. <script src="a.js"></script>
  24. </body>
  25. </html>

CSS:

  1. body, p, p,
  2. h1, h2, h3, h4, h5, h6,
  3. dl, dt, dd, ul, ol, li,
  4. table, caption, th, td,
  5. form, fieldset, input, textarea, select,
  6. pre, address, blockquote,
  7. embed, object {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. ul, ol {
  12. list-style:none;
  13. }
  14. img {
  15. vertical-align: top;
  16. }
  17. .scroll {
  18. width: 950px;
  19. height: 438px;
  20. margin: auto;
  21. overflow: hidden;
  22. position: relative;
  23. }
  24. .box {
  25. width: 950px;
  26. height: 438px;
  27. overflow: hidden;
  28. position: relative;
  29. }
  30. .box ul{
  31. width: 700%;
  32. position: absolute;
  33. left: 0;
  34. top: 0;
  35. padding:0px;
  36. margin:0px;
  37. }
  38. .box ul li{
  39. float: left;
  40. }
  41. .scroll ol {
  42. position: absolute;
  43. right: 365px;
  44. bottom: 5px;
  45. }
  46. .scroll ol li {
  47. float: left;
  48. width: 20px;
  49. height: 20px;
  50. border-radius: 50%;
  51. background: #000;
  52. margin-left: 10px;
  53. cursor: pointer;
  54. opacity: 0.5;
  55. }
  56. .scroll ol li.current {
  57. background-color: #000099;
  58. opacity: 0.8;
  59. }
  60. #last {
  61. position: absolute;
  62. bottom: 179px;
  63. width: 80px;
  64. height: 80px;
  65. cursor: pointer;
  66. }
  67. #next {
  68. position: absolute;
  69. bottom: 179px;
  70. right: 0px;
  71. width: 80px;
  72. height: 80px;
  73. cursor: pointer;
  74. }

1.png

展示效果如上图

接下来讲解js代码 ,先获取html中的元素

  1. var scroll = document.getElementById("scroll");
  2. var ul = document.getElementById("ul");
  3. var ulLis = ul.children;
  4. var liWidth = ul.children[0].offsetWidth;


再此之前,我们要明白,小圆点并不是写死的,它是根据ul li中的图片张数来决定的 。

  1. var ol = document.getElementById("olnavi");
  2. for (var i = 0; i < ulLis.length - 2; i++) {
  3. var li = document.createElement("li");
  4. li.id = (i + 1); //id用于后面为li添加事件
  5. ol.appendChild(li);
  6. }
  7. ol.children[0].className = "current" //将第一个小圆点设置为触发状态

要实现无缝滚动 就需要多两张图片才行 ,即克隆第一张图片,放到最后一张的后面,克隆最后一张,放到第一张的前面。

  1. var num = ulLis.length - 1;
  2. ul.appendChild(ul.children[0].cloneNode(true));
  3. ul.insertBefore(ul.children[num].cloneNode(true), ul.firstChild);

接下来为左右箭头添加事件,鼠标放到箭头上会变色

  1. var last = document.getElementById("last");
  2. last.style.background = "url(images/last-control.png)";
  3. last.addEventListener("mouseenter", function () {
  4. last.style.background = "url(images/newlast-control.png)";
  5. }, false);
  6. last.addEventListener("mouseleave", function () {
  7. last.style.background = "url(images/last-control.png)";
  8. }, false);
  9. var next = document.getElementById("next");
  10. next.style.background = "url(images/next-control.png)";
  11. next.addEventListener("mouseenter", function () {
  12. next.style.background = "url(images/newnext-control.png)";
  13. }, false);
  14. next.addEventListener("mouseleave", function () {
  15. next.style.background = "url(images/next-control.png)";
  16. }, false);

我们接着用js做动画 动画部分包括:
1.鼠标点击第几个小圆点,就要展示第几张图片,并且小圆点的颜色也发生变化.
2. 鼠标点击左右箭头,图片向左右移动一张
3.图片自动轮播,(这需要一个定时器)
4.鼠标放在图片上,图片停止自动播放(这需要清除定时器)
5.鼠标离开图片,图片继续自动轮播 (重新开始定时器)
这里我们封装了一个animate()动画函数

  1. function animate(obj, target) { //obj为需要移动的元素,在本文中为ul,target为需要移动到的位置
  2. var speed = obj.offsetLeft < target ? 10 : -10; //判断速度向左还是向右
  3. obj.timer = setInterval(function () { //计时器每隔一定时间移动一次
  4. var result = target - obj.offsetLeft; //剩余需要移动的距离
  5. obj.style.left = obj.offsetLeft + speed + "px"; //改变元素的left来实现移动
  6. if (Math.abs(result) <= Math.abs(speed)) { //当需要移动的距离小于速度时
  7. clearInterval(obj.timer); //清除计时器
  8. obj.style.left = target + "px"; //直接移动到需要移动的位置
  9. flag = true; //将flag置为true,使点击事件能再次触发
  10. }
  11. }, 1);
  12. }

接下来把动画函数赋给左右箭头

  1. var flag = true; //用于判断上一个事件是否执行完毕,如果没有执行完毕禁止再次触发事件
  2. var index = 1; //是第几个小圆点
  3. var lastclick = function () {
  4. if (flag) {
  5. flag = false; //进入事件将flag置为false
  6. console.log(flag);
  7. if (index === 1) { //判断是否为第一张
  8. index = 6;
  9. ul.style.left = "-5700px"; //当移动到第一张时,再向右移前会替换到最后一张后面的第一张,然后再向右移动。
  10. animate(ul, ul.offsetLeft + liWidth); //动画函数一次向有移动一个图片长度的距离
  11. }
  12. else {
  13. animate(ul, ul.offsetLeft + liWidth);
  14. }
  15. index -= 1; //移动小圆点计数器
  16. btnShow(index); //给新的小圆点高亮,取消上一个小圆点的高亮
  17. }
  18. }
  19. last.addEventListener("click", lastclick, false); //将函数赋给点击事件
  20. var nextclick = function () { //向左移与向右移类似
  21. if (flag) {
  22. flag = false;
  23. if (index === 5) {
  24. index = 0;
  25. ul.style.left = "0px";
  26. animate(ul, ul.offsetLeft - liWidth);
  27. }
  28. else {
  29. animate(ul, ul.offsetLeft - liWidth);
  30. }
  31. index += 1;
  32. btnShow(index);
  33. }
  34. }
  35. next.addEventListener("click",nextclick, false);
  36. function btnShow(cur_index) {
  37. for (var i = 0; i < ol.children.length; i++) {
  38. ol.children[i].className = ' '; //取消全部li的类
  39. }
  40. ol.children[cur_index - 1].className = "current"; //给新的小圆点加上类
  41. }

再加上一个计时器,每隔一段时间就会触发一次下一张的效果,来实现轮播

  1. var timer;
  2. function play() {
  3. timer = setInterval(nextclick, 3000)
  4. }
  5. scroll.addEventListener("load", play(), false); //整个p全部加载完毕后开始
  6. scroll.addEventListener("mouseenter", function () { //鼠标移入图片是清除计时器
  7. clearInterval(timer);
  8. }, false);
  9. scroll.addEventListener("mouseleave", function () { //鼠标移出图片时再次启动计时器
  10. play();
  11. }, false);

最后给小圆点加上事件,点第几个轮播到第几张

  1. //小圆点的点击事件
  2. var olliclick = function () {
  3. if (flag) {
  4. flag = false;
  5. var cur_li = document.getElementsByClassName("current");
  6. var lastid = cur_li[0].id; //当前的小圆点是第几个
  7. var distance = this.id - lastid; //计算当前小圆点与点击的小圆点的距离(分正负)
  8. if (distance == 0) {
  9. flag = true;
  10. }
  11. else {
  12. animate_ol(ul, distance);
  13. }
  14. }
  15. }
  16. //给所有的小圆点添加上点击事件
  17. var ollitimer = 1
  18. var lis = ol.getElementsByTagName('li');
  19. for (ollitimer; ollitimer < lis.length+1; ollitimer++) {
  20. var olli = document.getElementById(ollitimer);
  21. olli.addEventListener("click", olliclick, false);
  22. }
  23. function animate_ol(obj, value) { //小圆点动画函数
  24. if (value > 0) { //判断移动方向
  25. var speed = -20*value; //使动画时间一致
  26. }
  27. if (value < 0) {
  28. var speed = -20*value;
  29. }
  30. var lastleft = obj.offsetLeft;
  31. obj.timer = setInterval(function () {
  32. var distance = Math.abs(value * liWidth) - Math.abs(obj.offsetLeft - lastleft);
  33. //剩余需要移动的距离
  34. if (distance < Math.abs(speed)) {
  35. clearInterval(obj.timer);
  36. if (value > 0) {
  37. obj.style.left = obj.offsetLeft - distance + "px";
  38. flag = true;
  39. }
  40. if (value < 0) {
  41. obj.style.left = obj.offsetLeft + distance + "px";
  42. flag = true;
  43. }
  44. }
  45. else {
  46. obj.style.left = obj.offsetLeft + speed + "px";
  47. }
  48. }, 1);
  49. index = index + value;
  50. btnShow(index);
  51. }

再对一下常见的鬼畜bug进行一下总结:
通过设置flag来防止多次点击造成的计时器冲突,在点击后将flag置为false,在动画函数结束时再置为true,这样只能在上一个点击事件动画结束后才会触发第二次。

最后放上完整的js代码

  1. var scroll = document.getElementById("scroll");
  2. var ul = document.getElementById("ul");
  3. var ulLis = ul.children;
  4. var liWidth = ul.children[0].offsetWidth;
  5. var num = ulLis.length - 1;
  6. ul.appendChild(ul.children[0].cloneNode(true));
  7. ul.insertBefore(ul.children[num].cloneNode(true), ul.firstChild);
  8. var ol = document.getElementById("olnavi");
  9. for (var i = 0; i < ulLis.length - 2; i++) {
  10. var li = document.createElement("li");
  11. li.id = (i + 1);
  12. ol.appendChild(li);
  13. }
  14. ol.children[0].className = "current";
  15. var last = document.getElementById("last");
  16. last.style.background = "url(images/last-control.png)";
  17. last.addEventListener("mouseenter", function () {
  18. last.style.background = "url(images/newlast-control.png)";
  19. }, false);
  20. last.addEventListener("mouseleave", function () {
  21. last.style.background = "url(images/last-control.png)";
  22. }, false);
  23. var next = document.getElementById("next");
  24. next.style.background = "url(images/next-control.png)";
  25. next.addEventListener("mouseenter", function () {
  26. next.style.background = "url(images/newnext-control.png)";
  27. }, false);
  28. next.addEventListener("mouseleave", function () {
  29. next.style.background = "url(images/next-control.png)";
  30. }, false);
  31. var flag = true;
  32. var index = 1;
  33. var lastclick = function () {
  34. if (flag) {
  35. flag = false;
  36. console.log(flag);
  37. if (index === 1) {
  38. index = 6;
  39. ul.style.left = "-5700px";
  40. animate(ul, ul.offsetLeft + liWidth);
  41. }
  42. else {
  43. animate(ul, ul.offsetLeft + liWidth);
  44. }
  45. index -= 1;
  46. btnShow(index);
  47. }
  48. }
  49. last.addEventListener("click", lastclick, false);
  50. var nextclick = function () {
  51. if (flag) {
  52. flag = false;
  53. if (index === 5) {
  54. index = 0;
  55. ul.style.left = "0px";
  56. animate(ul, ul.offsetLeft - liWidth);
  57. }
  58. else {
  59. animate(ul, ul.offsetLeft - liWidth);
  60. }
  61. index += 1;
  62. btnShow(index);
  63. }
  64. }
  65. next.addEventListener("click",nextclick, false);
  66. function btnShow(cur_index) {
  67. for (var i = 0; i < ol.children.length; i++) {
  68. ol.children[i].className = ' ';
  69. }
  70. ol.children[cur_index - 1].className = "current";
  71. }
  72. function animate(obj, target) {
  73. var speed = obj.offsetLeft < target ? 10 : -10;
  74. obj.timer = setInterval(function () {
  75. var result = target - obj.offsetLeft;
  76. obj.style.left = obj.offsetLeft + speed + "px";
  77. if (Math.abs(result) <= Math.abs(speed)) {
  78. clearInterval(obj.timer);
  79. obj.style.left = target + "px";
  80. flag = true;
  81. }
  82. }, 1);
  83. }
  84. var timer;
  85. function play() {
  86. timer = setInterval(nextclick, 3000)
  87. }
  88. scroll.addEventListener("load", play(), false);
  89. scroll.addEventListener("mouseenter", function () {
  90. clearInterval(timer);
  91. }, false);
  92. scroll.addEventListener("mouseleave", function () {
  93. play();
  94. }, false);
  95. var olliclick = function () {
  96. if (flag) {
  97. flag = false;
  98. var cur_li = document.getElementsByClassName("current");
  99. var lastid = cur_li[0].id;
  100. var distance = this.id - lastid;
  101. if (distance == 0) {
  102. flag = true;
  103. }
  104. else {
  105. animate_ol(ul, distance);
  106. }
  107. }
  108. }
  109. var ollitimer = 1
  110. var lis = ol.getElementsByTagName('li');
  111. for (ollitimer; ollitimer < lis.length+1; ollitimer++) {
  112. var olli = document.getElementById(ollitimer);
  113. olli.addEventListener("click", olliclick, false);
  114. }
  115. function animate_ol(obj, value) {
  116. if (value > 0) {
  117. var speed = -20*value;
  118. }
  119. if (value < 0) {
  120. var speed = -20*value;
  121. }
  122. var lastleft = obj.offsetLeft;
  123. obj.timer = setInterval(function () {
  124. var distance = Math.abs(value * liWidth) - Math.abs(obj.offsetLeft - lastleft);
  125. if (distance < Math.abs(speed)) {
  126. clearInterval(obj.timer);
  127. if (value > 0) {
  128. clearInterval(obj.timer);
  129. obj.style.left = obj.offsetLeft - distance + "px";
  130. flag = true;
  131. }
  132. if (value < 0) {
  133. clearInterval(obj.timer);
  134. obj.style.left = obj.offsetLeft + distance + "px";
  135. flag = true;
  136. }
  137. }
  138. else {
  139. obj.style.left = obj.offsetLeft + speed + "px";
  140. }
  141. }, 1);
  142. index = index + value;
  143. btnShow(index);
  144. }

相关推荐:

原生js实现轮播图

原生javascript实现图片轮播效果代码

以上就是如何使用原生JavaScript实现轮播图?代码详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行