博客列表 >js学习:第18章 JS实战选项卡、懒加载、轮播图

js学习:第18章 JS实战选项卡、懒加载、轮播图

王小飞
王小飞原创
2020年05月27日 16:21:50992浏览

轮播图:

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>首页轮播图</title>
  6. <style>
  7. ul,
  8. li {
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. }
  13. .box {
  14. /*定位父级*/
  15. position: relative;
  16. width: 1000px;
  17. height: 350px;
  18. margin: 0 auto;
  19. }
  20. .box .slider {
  21. width: 1000px;
  22. height: 350px;
  23. display: none;
  24. }
  25. .box .slider.active {
  26. display: block;
  27. }
  28. .box .point-list {
  29. position: absolute;
  30. /*绝对定位的环境下的水平居中方式*/
  31. left: 50%;
  32. margin-left: -38px;
  33. top: 310px;
  34. }
  35. .box .point-list .point {
  36. display: inline-block;
  37. width: 12px;
  38. height: 12px;
  39. margin: 0 5px;
  40. background-color: white;
  41. border-radius: 100%;
  42. }
  43. .box .point-list .point.active {
  44. background-color: black;
  45. }
  46. .box .point-list .point:hover {
  47. cursor: pointer;
  48. }
  49. .skip {
  50. position: absolute;
  51. top: 140px;
  52. display: inline-block;
  53. width: 40px;
  54. height: 80px;
  55. text-align: center;
  56. line-height: 80px;
  57. background-color: lightgray;
  58. color: white;
  59. opacity: 0.2;
  60. font-size: 36px;
  61. }
  62. .box .prev {
  63. left: 0;
  64. }
  65. .box .next {
  66. right: 0;
  67. }
  68. .box .skip:hover {
  69. cursor: pointer;
  70. opacity: 0.5;
  71. color: black;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div class="box">
  77. <img
  78. src="banner/banner1.jpg"
  79. alt=""
  80. data-index="1"
  81. class="slider active"
  82. />
  83. <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  84. <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  85. <div class="point-list">
  86. <!-- <span class="point active" data-index="1"></span>
  87. <span class="point" data-index="2"></span>
  88. <span class="point" data-index="3"></span> -->
  89. </div>
  90. <span class="skip prev">&lt;</span>
  91. <span class="skip next">&gt;</span>
  92. </div>
  93. <script>
  94. var cl = console.log.bind(console);
  95. // 轮播图片组
  96. var imgs = document.querySelectorAll("img");
  97. var pointList = document.querySelector(".point-list");
  98. // 动态生成小圆点
  99. imgs.forEach(function (img, index) {
  100. var span = document.createElement("span");
  101. if (index === 0) span.classList.add("point", "active");
  102. span.classList.add("point");
  103. // 将小圆点与当前显示的图片的索引进行关联
  104. span.dataset.index = img.dataset.index;
  105. pointList.appendChild(span);
  106. });
  107. // 为了正确的设置小圆点高亮, 这里需要获取到所有的小圆点
  108. var points = document.querySelectorAll(".point");
  109. // 事件代理/委托: 给小圆点添加点击事件
  110. pointList.addEventListener(
  111. "click",
  112. function (ev) {
  113. cl(ev.target);
  114. imgs.forEach(function (img) {
  115. if (img.dataset.index === ev.target.dataset.index) {
  116. imgs.forEach(function (img) {
  117. img.classList.remove("active");
  118. });
  119. // 设置当前图片的激活样式
  120. img.classList.add("active");
  121. // 公共函数: 设置小圆点当前的高亮, 必须与图片一一对应, 同步
  122. setPointActive(img.dataset.index);
  123. }
  124. });
  125. },
  126. false
  127. );
  128. // 公共函数:setPointActive
  129. function setPointActive(imgIndex) {
  130. // 清除原来的所有的小圆点上的高亮
  131. points.forEach(function (point) {
  132. point.classList.remove("active");
  133. });
  134. points.forEach(function (point) {
  135. if (point.dataset.index === imgIndex) point.classList.add("active");
  136. });
  137. }
  138. // 获取翻页按钮
  139. var skip = document.querySelectorAll(".skip");
  140. // 添加事件
  141. skip.item(0).addEventListener("click", skipImg, false);
  142. skip.item(1).addEventListener("click", skipImg, false);
  143. // 翻页事件回调skipImg
  144. function skipImg(ev) {
  145. // 遍历并找到当前正在显示的图片
  146. var currentImg = null;
  147. imgs.forEach(function (img) {
  148. if (img.classList.contains("active")) currentImg = img;
  149. });
  150. // 1. 判断是否是点击了显示前一张?
  151. if (ev.target.classList.contains("prev")) {
  152. currentImg.classList.remove("active");
  153. currentImg = currentImg.previousElementSibling;
  154. cl(currentImg);
  155. // 如果存在前一张
  156. if (currentImg !== null && currentImg.nodeName === "IMG")
  157. // 将当前图片显示
  158. currentImg.classList.add("active");
  159. else {
  160. //否则就显示最后一张,形成循环
  161. currentImg = imgs[imgs.length - 1];
  162. currentImg.classList.add("active");
  163. }
  164. }
  165. // 2. 判断是否是点击了显示下一张?
  166. if (ev.target.classList.contains("next")) {
  167. currentImg.classList.remove("active");
  168. currentImg = currentImg.nextElementSibling;
  169. cl(currentImg);
  170. // 如果存在前一张
  171. if (currentImg !== null && currentImg.nodeName === "IMG")
  172. // 将当前图片显示
  173. currentImg.classList.add("active");
  174. else {
  175. //否则就显示最后一张,形成循环
  176. currentImg = imgs[0];
  177. currentImg.classList.add("active");
  178. }
  179. }
  180. // 公共函数: 设置小圆点当前的高亮, 必须与图片一一对应, 同步
  181. setPointActive(currentImg.dataset.index);
  182. }
  183. var box = document.querySelector(".box");
  184. var timer = null;
  185. // 1. 当鼠标移出轮播图区域时, 启动定时器,每2秒自动切换图片
  186. box.addEventListener("mouseout", startTimer, false);
  187. // 2. 当鼠标移入轮播图区域时,清除定时器,由用户点击操作
  188. box.addEventListener("mouseover", clearTimer, false);
  189. // 启动定时器
  190. function startTimer() {
  191. var click = new Event("click");
  192. //setInterval(): 间歇式执行
  193. setInterval(function () {
  194. skip.item(1).dispatchEvent(click);
  195. }, 6000);
  196. }
  197. // 清除定时器
  198. function clearTimer() {
  199. clearInterval(timer);
  200. }
  201. </script>
  202. </body>
  203. </html>

效果:

动态:

选项卡:

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>选项卡</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. a {
  13. text-decoration: none;
  14. color: #555;
  15. }
  16. a:hover {
  17. text-decoration: underline;
  18. color: red;
  19. }
  20. li {
  21. list-style: none;
  22. }
  23. li:hover {
  24. cursor: default;
  25. }
  26. .tabs {
  27. width: 300px;
  28. height: 300px;
  29. margin: 30px;
  30. background-color: #ddd;
  31. display: flex;
  32. flex-direction: column;
  33. }
  34. .tab {
  35. height: 36px;
  36. display: flex;
  37. }
  38. .tab li {
  39. flex: auto;
  40. text-align: center;
  41. line-height: 36px;
  42. background-color: #fff;
  43. }
  44. .tab li.active {
  45. background-color: #ddd;
  46. }
  47. /* 默认所有选项卡只有一个显示,其它隐藏 */
  48. .item {
  49. padding: 20px;
  50. display: none;
  51. }
  52. .item.active {
  53. display: block;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="tabs">
  59. <!-- 导航 -->
  60. <ul class="tab">
  61. <li class="active" data-index="1">公司动态</li>
  62. <li data-index="2">行业动态</li>
  63. <li data-index="3">技术支持</li>
  64. </ul>
  65. <!-- 详情1 -->
  66. <ul class="item active" data-index="1">
  67. <li><a href="">2020年春节放假通知</a></li>
  68. <li><a href="">五一超级特惠活动</a></li>
  69. <li><a href="">2019年春节放假通知</a></li>
  70. </ul>
  71. <!-- 详情2 -->
  72. <ul class="item" data-index="2">
  73. <li><a href="">小型冷库的设计要求是怎么样的</a></li>
  74. <li><a href="">冷库实现节能的方法有哪些</a></li>
  75. <li><a href="">冷库出现堵冰现象怎么办</a></li>
  76. </ul>
  77. <!-- 详情2 -->
  78. <ul class="item" data-index="3">
  79. <li><a href="">安装小型冷库对保存水果的</a></li>
  80. <li><a href="">冷库安装后出现裂缝是怎么</a></li>
  81. <li><a href="">冷库安装后,怎么样发挥冷库的作用?</a></li>
  82. </ul>
  83. </div>
  84. <script>
  85. var cl = console.log.bind(console);
  86. // 导航:事件委托
  87. var tab = document.querySelector(".tab");
  88. // 列表
  89. var items = document.querySelectorAll(".item");
  90. // 给导航绑定点击事件
  91. tab.addEventListener("click", show, false);
  92. // 给导航绑定鼠标移动事件
  93. tab.addEventListener("mouseover", show, false);
  94. // 事件回调函数
  95. function show(ev) {
  96. cl(ev.target);
  97. // data-index
  98. // cl(ev.target.dataset.index);
  99. // 1. 清空导航原有的激活
  100. ev.target.parentNode.childNodes.forEach(function (item) {
  101. if (item.nodeType === 1) item.classList.remove("active");
  102. });
  103. // 2. 将当前用户正在点击的导航设置为激活
  104. ev.target.classList.toggle("active");
  105. // 3. 清空列表的原有激活
  106. items.forEach(function (item) {
  107. item.classList.remove("active");
  108. });
  109. // 4. 在列表中查询data-index与导航的data-index相等的内容,将它设置为激活
  110. items.forEach(function (item) {
  111. if (item.dataset.index === ev.target.dataset.index)
  112. item.classList.add("active");
  113. });
  114. }
  115. </script>
  116. </body>
  117. </html>

效果:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议