ASCII码 ASCII码

轮播图的暂停与播放

发布于:2022-04-13 14:12:51  栏目:技术文档

轮播图的暂停与播放

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* ! 3. 轮播图 */
  10. .slider {
  11. max-width: 750px;
  12. min-width: 320px;
  13. margin: auto;
  14. padding: 0 10px;
  15. }
  16. .slider .imgs {
  17. /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  18. height: 150px;
  19. }
  20. .slider .imgs img {
  21. /* 图片完全充满父级空间显示 */
  22. height: 100%;
  23. width: 100%;
  24. /* 图片带有圆角 */
  25. border-radius: 10px;
  26. /* 默认图片全部隐藏,只有有active的图片才显示 */
  27. display: none;
  28. }
  29. .slider .imgs img:hover {
  30. cursor: pointer;
  31. }
  32. /* 默认显示第一张 */
  33. .slider .imgs img.active {
  34. display: block;
  35. }
  36. /* 轮播图按钮组 */
  37. .slider .btns {
  38. /* 按钮水平一排显示,用flex,且水平居中 */
  39. display: flex;
  40. place-content: center;
  41. }
  42. .slider .btns span {
  43. /* 按钮宽高相同,确定显示成一个正圆 */
  44. width: 8px;
  45. height: 8px;
  46. /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  47. background-color: rgba(255, 255, 255, 0.4);
  48. /* 50%可确保显示为正圆 */
  49. border-radius: 50%;
  50. /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  51. margin: -12px 3px 5px;
  52. }
  53. .slider .btns span.active {
  54. background-color: #fff;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div class="slider" onmouseover="pointerIn()" onmouseleave="pointerOut()">
  60. <!--
  61. 图片容器
  62. 1. 图片组
  63. 2. 按钮组
  64. 注: 按钮数组与图片数量是一样的
  65. -->
  66. <div class="imgs">
  67. <!-- 轮播图默认从第一张开始显示 -->
  68. <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  69. <img src="./images/banner2.jpg" alt="" data-index="2" />
  70. <img src="./images/banner3.png" alt="" data-index="3" />
  71. </div>
  72. <!-- 切换按钮数量与图片数量必须一致 -->
  73. <div class="btns">
  74. <span data-index="1" class="active" onclick="setActive()"></span>
  75. <span data-index="2" onclick="setActive()"></span>
  76. <span data-index="3" onclick="setActive()"></span>
  77. </div>
  78. </div>
  79. <script>
  80. // 1. 获取全部图片和按钮
  81. const imgs = document.querySelectorAll(".slider .imgs img");
  82. const btns = document.querySelectorAll(".slider .btns span");
  83. // const box = document.querySelector(".slider");
  84. // 2. 设置激活状态
  85. function setActive() {
  86. // 1. 清空图片和所有按钮的激活状态
  87. imgs.forEach(img => img.classList.remove("active"));
  88. btns.forEach(btn => btn.classList.remove("active"));
  89. // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
  90. event.target.classList.add("active");
  91. imgs.forEach(img => {
  92. if (img.dataset.index === event.target.dataset.index) {
  93. img.classList.add("active");
  94. }
  95. });
  96. }
  97. // 3. 自动播放
  98. // [1,2,3]
  99. // [2,3,1]
  100. // [3,1,2]
  101. // [1,2,3]
  102. // 首尾相连,实现循环播放
  103. // 自动点击: 事件派发器
  104. // 间歇式触发,每隔一段固定时间会自动触发一次事件
  105. // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
  106. let car = setInterval(
  107. arr => {
  108. // 1. 头部删除
  109. let i = arr.shift();
  110. // 2. 尾部追加
  111. arr.push(i);
  112. arrNew = arr;
  113. // 3. 事件派发: 模拟用户点击
  114. btns[i].dispatchEvent(new Event("click"));
  115. },
  116. 2000,
  117. Object.keys(btns)
  118. );
  119. // console.log(Object.keys(btns));
  120. // console.log(Object.keys(imgs));
  121. function pointerIn() {
  122. clearInterval(car);
  123. }
  124. // box.onmouseover = function () {
  125. // clearInterval(car);
  126. // };
  127. function pointerOut() {
  128. car = setInterval(
  129. arr => {
  130. // 1. 头部删除
  131. let i = arr.shift();
  132. // 2. 尾部追加
  133. arr.push(i);
  134. arrNew = arr;
  135. // 3. 事件派发: 模拟用户点击
  136. btns[i].dispatchEvent(new Event("click"));
  137. },
  138. 2000,
  139. arrNew
  140. );
  141. }
  142. // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
  143. // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
  144. </script>
  145. </body>
  146. </html>
相关推荐
阅读 +