登录  /  注册
博主信息
博文 100
粉丝 8
评论 2
访问量 145758
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
轮播图案例(javascript原生代码)
lilove的博客
原创
1157人浏览过

JS原生代码实现轮播图,并增加自动播放功能

html

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="css/demo3.css">
  7. <title>轮播图案例</title>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <img src="banner/banner1.png" alt="" data-index=1 class="slider active">
  12. <img src="banner/banner2.png" alt="" data-index=2 class="slider">
  13. <img src="banner/banner3.png" alt="" data-index=3 class="slider">
  14. <img src="banner/banner4.png" alt="" data-index=4 class="slider">
  15. <img src="banner/banner5.png" alt="" data-index=5 class="slider">
  16. <img src="banner/banner6.png" alt="" data-index=6 class="slider">
  17. <!-- 小圆点 -->
  18. <div class="point-list"></div>
  19. <!-- 翻页 -->
  20. <span class="skip prev">&lt;</span>
  21. <span class="skip next">&gt;</span>
  22. </div>
  23. </body>
  24. <script src="js/demo3.js"></script>
  25. </html>

CSS

  1. /* 轮播图CSS */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: content-box;
  6. }
  7. .container {
  8. width: 1000px;
  9. height: 300px;
  10. margin: auto;
  11. position: relative;
  12. }
  13. .container .slider {
  14. width: 1000px;
  15. height: 300px;
  16. display: none;
  17. }
  18. .container .slider.active {
  19. display: block;
  20. }
  21. .point-list {
  22. width: 80px;
  23. height: 20px;
  24. position: absolute;
  25. top: 280px;
  26. left: 450px;
  27. }
  28. .point-list .point {
  29. display: inline-block;
  30. width: 10px;
  31. height: 10px;
  32. margin-right: 3px;
  33. border-radius: 100%;
  34. background-color: rgba(200, 200, 200, 0.7);
  35. }
  36. .point-list .point.active {
  37. background-color: tomato;
  38. }
  39. .point-list .point:hover {
  40. background-color: tomato;
  41. cursor: pointer;
  42. }
  43. .skip {
  44. font-size: 30px;
  45. color: rgba(255, 255, 255, 0);
  46. position: absolute;
  47. }
  48. .skip:hover {
  49. color: tomato;
  50. cursor: pointer;
  51. background-color: rgba(200, 200, 200, 0.7);
  52. }
  53. .prev {
  54. top: 130px;
  55. left: 10px;
  56. }
  57. .next {
  58. top: 130px;
  59. right: 10px;
  60. }

js

  1. // 轮播图js
  2. // 获取所有图片
  3. var imgs = document.querySelectorAll("img");
  4. // 获取小圆点组
  5. var pointList = document.querySelector(".point-list");
  6. // 动态生成小圆点
  7. imgs.forEach(function (img, index) {
  8. var span = document.createElement("span");
  9. if (index == 0) {
  10. span.classList.add("point", "active");
  11. }
  12. span.classList.add("point");
  13. // 给当前小圆点添加自定义的 data-index
  14. span.dataset.index = img.dataset.index;
  15. pointList.appendChild(span);
  16. });
  17. // 获取所有小圆点
  18. var points = document.querySelectorAll(".point");
  19. // 给小圆点组添加点击事件(代理)
  20. pointList.addEventListener("click", function (ev) {
  21. // 遍历每个轮播图片
  22. imgs.forEach(function (img) {
  23. // 判断 index 的值是否与当前点击的小圆点 index 值相等
  24. // 相等的话给默认小圆点添加样式 active
  25. if (img.dataset.index === ev.target.dataset.index) {
  26. // 先去掉已经高亮的小圆点样式
  27. imgs.forEach(function (img) {
  28. img.classList.remove("active");
  29. });
  30. // 添加默认小圆点高亮样式
  31. img.classList.add("active");
  32. // 设置与当前图片对应的小圆点高亮显示
  33. // 由于这个功能要多处使用,声明为公共函数
  34. setPointActive(img.dataset.index);
  35. }
  36. });
  37. });
  38. // 设置当前图片对应的小圆点高亮显示
  39. function setPointActive(imgIndex) {
  40. // 去掉已高亮的小圆点样式
  41. points.forEach(function (point) {
  42. point.classList.remove("active");
  43. });
  44. // 当前点击小圆点添加高亮
  45. points.forEach(function (point) {
  46. if (point.dataset.index === imgIndex) {
  47. point.classList.add("active");
  48. }
  49. });
  50. }
  51. // ============图片自动播放=============
  52. // 鼠标移出2秒后自动播放,鼠标移入时自动停止播放
  53. // 获取图片父元素
  54. var container = document.querySelector(".container");
  55. // 向后翻页函数
  56. function playImg() {
  57. // 1.获取当前图片
  58. var autoImg = null;
  59. // 2.遍历图片
  60. imgs.forEach(function (img) {
  61. // 判断图片 class 中是否包含 active
  62. if (img.classList.contains("active")) {
  63. // 如果包含则更换当前图片
  64. autoImg = img;
  65. }
  66. });
  67. // 3.去掉当前图片的 active 属性
  68. autoImg.classList.remove("active");
  69. // 4.获取下一页图片
  70. // nextElementSibling属性:返回指定元素的下一个兄弟元素
  71. autoImg = autoImg.nextElementSibling;
  72. // 如果存在后一张图片,添加 active 样式,否则进入循环现实第一张
  73. if (autoImg !== null && autoImg.nodeName === "IMG") {
  74. autoImg.classList.add("active");
  75. } else {
  76. // 循环获取下一页
  77. autoImg = imgs[0];
  78. autoImg.classList.add("active");
  79. }
  80. // 小圆点高亮
  81. setPointActive(autoImg.dataset.index);
  82. }
  83. // 声明自动播放变量
  84. var autoPlay = null;
  85. // 给图片父元素添加鼠标移出事件(代理)
  86. container.addEventListener("mouseover", function () {
  87. clearInterval(autoPlay);
  88. });
  89. // 给图片父元素添加鼠标移入事件(代理)
  90. container.addEventListener("mouseout", function () {
  91. autoPlay = setInterval(playImg, 2000);
  92. });
  93. // ============翻页==============
  94. // 获取翻页按钮
  95. var skip = document.querySelectorAll(".skip");
  96. // 给翻页按钮添加事件
  97. skip.item(0).addEventListener("click", skipImg, false);
  98. skip.item(1).addEventListener("click", skipImg, false);
  99. // 翻页函数
  100. function skipImg(ev) {
  101. // 1.获取当前图片
  102. var currentImg = null;
  103. // 遍历图片
  104. imgs.forEach(function (img) {
  105. // 判断图片 class 中是否包含 active
  106. if (img.classList.contains("active")) {
  107. // 如果包含则更换当前图片
  108. currentImg = img;
  109. }
  110. });
  111. // 2.判断是否点击了前一页按钮
  112. if (ev.target.classList.contains("prev")) {
  113. // 去掉当前图片的 active 属性
  114. currentImg.classList.remove("active");
  115. // 如果点击前一页按钮就将当前显示图片替换成签一张图片
  116. // previousElementSibling属性:返回指定元素的前一个兄弟元素
  117. currentImg = currentImg.previousElementSibling;
  118. // 如果存在前一张图片,添加 active 样式,否则进入循环现实最后一张
  119. if (currentImg !== null && currentImg.nodeName === "IMG") {
  120. currentImg.classList.add("active");
  121. } else {
  122. // 循环获取当前页
  123. currentImg = imgs[imgs.length - 1];
  124. currentImg.classList.add("active");
  125. }
  126. }
  127. // 3.判断是否点击了下一页按钮
  128. if (ev.target.classList.contains("next")) {
  129. // 去掉当前图片的 active 属性
  130. currentImg.classList.remove("active");
  131. // 如果点击下一页按钮就将当前显示图片替换成后一张图片
  132. // nextElementSibling属性:返回指定元素的下一个兄弟元素
  133. currentImg = currentImg.nextElementSibling;
  134. // 如果存在后一张图片,添加 active 样式,否则进入循环现实第一张
  135. if (currentImg !== null && currentImg.nodeName === "IMG") {
  136. currentImg.classList.add("active");
  137. } else {
  138. // 循环获取当前页
  139. currentImg = imgs[0];
  140. currentImg.classList.add("active");
  141. }
  142. }
  143. // 小圆点高亮
  144. setPointActive(currentImg.dataset.index);
  145. }

实现效果

1.翻页

2.鼠标移出自动播放,移入停止播放

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:不错
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学