博主信息
无名小辈
博文
19
粉丝
0
评论
0
访问量
2248
积分:1
P豆:39

自动轮播图 (鼠标悬停、移出后,按鼠标当前位置自动轮播)

2022年08月05日 17:56:16阅读数:117博客 / 无名小辈/ 前端
  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. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. li {
  15. list-style: none;
  16. }
  17. a {
  18. text-decoration: none;
  19. color: #343434;
  20. }
  21. div.banner {
  22. width: 80vw;
  23. margin: 0 auto;
  24. position: relative;
  25. z-index: 10;
  26. }
  27. div.banner div.images {
  28. width: 100%;
  29. }
  30. div.banner div.images a {
  31. width: 100%;
  32. height: 100%;
  33. display: none;
  34. }
  35. div.banner div.images a.active {
  36. display: block;
  37. }
  38. div.banner div.images img {
  39. width: 100%;
  40. }
  41. div.banner div.btns {
  42. position: absolute;
  43. width: auto;
  44. display: grid;
  45. grid-template-columns: repeat(4, 20px);
  46. gap: 10px;
  47. height: 10px;
  48. bottom: 20px;
  49. right: 20px;
  50. z-index: 200;
  51. overflow: hidden;
  52. }
  53. div.banner div.btns span {
  54. width: 100%;
  55. height: 100%;
  56. display: block;
  57. background-color: aliceblue;
  58. border-radius: 10px;
  59. cursor: pointer;
  60. font-size: 2px;
  61. }
  62. div.banner div.btns span:hover,
  63. div.banner div.btns span.active {
  64. background-color: blueviolet;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="banner">
  70. <div class="images">
  71. <a href="https://www.php.cn/k.html" target="_blank"><img
  72. src="https://img.php.cn/upload/aroundimg/000/000/001/62ea76c2b5ace916.png"></a>
  73. <a href="https://www.php.cn/k.html?1" target="_blank"><img
  74. src="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></a>
  75. <a href="https://www.php.cn/blog/detail/33314.html" data-index="3"><img
  76. src="https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg"></a>
  77. <a href="https://www.php.cn/app/" target="_blank"><img
  78. src="https://img.php.cn/upload/aroundimg/000/000/068/62398180bdae8398.jpg"></a>
  79. </div>
  80. <div class="btns"></div>
  81. </div>
  82. <script>
  83. // 遍历图片,取到dataset.index
  84. const images = document.querySelectorAll('.images > a');
  85. //定时器开关
  86. let lunbo = '';
  87. // 为第一个图片,添加 active 样式
  88. images[0].classList.add('active');
  89. // 根据 key 的下标,添加 data-index 的标识
  90. images.forEach((item, key) => item.dataset.index = key);
  91. // 遍历按钮,取到dataset.index
  92. const btns = document.querySelector('.btns');
  93. // 在 btns 下面,添加 span
  94. images.forEach((item) => btns.insertAdjacentHTML('beforeEnd', `<span data-index='${item.dataset.index}'></span>`));
  95. // 找到 images 图片中 active 样式的下标,然后 btns 根据 下标 为 span 标签 添加 active 样式
  96. [...btns.children][[...images].find((item) => item.className == 'active').dataset.index].classList.add('active');
  97. // 添加事件,鼠标点击后,跳转图片
  98. btns.addEventListener('click', show, true);
  99. //添加事件,鼠标移入后,暂停轮播
  100. btns.addEventListener('mouseover', showStop, true);
  101. //添加事件,鼠标移出后,开始轮播
  102. btns.addEventListener('mouseout', showStart, true);
  103. function show() {
  104. if (event.target.dataset.index) {
  105. event.stopPropagation(); // 阻止事件冒泡
  106. event.preventDefault(); // 阻止默认事件
  107. // 移除 div.btns 下面 span 标签的 active 样式
  108. [...btns.children].forEach((item) => item.classList.remove('active'))
  109. // 为 div.btns 下面 span 标签 添加 active 样式
  110. event.target.classList.add('active');
  111. //移除 div.images 下面 A 标签的 active样式
  112. images.forEach((item) => item.classList.remove('active'));
  113. // 为 div.images 下面 A 标签 添加 active 样式
  114. [...images].find((item) => item.dataset.index == event.target.dataset.index).classList.add('active');
  115. }
  116. }
  117. function showStop() {
  118. event.target.dispatchEvent(new Event('click'));
  119. clearInterval(lunbo);
  120. }
  121. function showStart() {
  122. // 获取 btns 下 span 标签
  123. const lunboNavs = document.querySelectorAll('.btns span');
  124. let lunboArr = [];
  125. // console.log([...lunboNavs].find((item) => item.className == 'active').dataset.index);
  126. Object.keys(btns.children).forEach((item, key) => {
  127. lunboArr[key] = key + parseInt([...lunboNavs].find((item) => item.className == 'active').dataset.index);
  128. if (lunboArr[key] >= Object.keys(btns.children).length) {
  129. lunboArr[key] = key + parseInt([...lunboNavs].find((item) => item.className == 'active').dataset.index) - Object.keys(btns.children).length;
  130. }
  131. });
  132. console.log(lunboArr);
  133. // 定时播放
  134. lunbo = setInterval(function (arr) {
  135. let index = arr.shift();
  136. btns.children[index].dispatchEvent(new Event('click'));
  137. arr.push(index)
  138. }, 2000, lunboArr);
  139. }
  140. showStart();
  141. </script>
  142. </body>
  143. </html>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论