轮播图添加左右翻页、鼠标移出自动播放、移入停止播放、选项卡

2021年01月14日 01:52:01阅读数:20博客 / / JavaScript

1. 轮播图

添加左右翻页、当鼠标移出每隔2秒自动播放、鼠标移入停止播放

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>轮播图</title>
  6. <link rel="stylesheet" href="banner/style.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <!-- 图片组 -->
  11. <nav class="imgs">
  12. <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active"></a>
  13. <a href=""><img src="banner/banner2.jpg" alt="" data-index="2"></a>
  14. <a href=""><img src="banner/banner3.jpg" alt="" data-index="3"></a>
  15. <a href=""><img src="banner/banner4.jpg" alt="" data-index="4"></a>
  16. </nav>
  17. <!-- 小按钮,这里的小按钮应该根据图片数量自动生成 -->
  18. <nav class="btns">
  19. </nav>
  20. <!-- 左右翻页 -->
  21. <nav class="skip">
  22. <a href="#" class="prev">&lt;</a>
  23. <a href="#" class="next">&gt;</a>
  24. </nav>
  25. <script>
  26. // 获取所有图片
  27. const imgs = document.querySelectorAll(".container > .imgs img");
  28. // 获取图片下方按钮
  29. const btnGrap = document.querySelector(".container > .btns");
  30. // 获取左右翻页按钮
  31. const skip = document.querySelector(".container > .skip");
  32. // 创建一组与图片数量对应的小按钮
  33. function autoCreateBtns(ele, imgLength) {
  34. const frag = document.createDocumentFragment();
  35. for (let i = 0; i < imgLength; i++) {
  36. const a = document.createElement("a");
  37. a.href = "#";
  38. a.dataset.index = i + 1;
  39. if (i === 0) a.classList.add("active");
  40. frag.appendChild(a);
  41. }
  42. ele.appendChild(frag);
  43. }
  44. // 调用创建小按钮的函数
  45. autoCreateBtns(btnGrap, imgs.length);
  46. // 为生成的小按钮添加点击事件
  47. const btns = document.querySelectorAll(".container > .btns > *");
  48. // 声明二个公共函数
  49. // 1. 获取激活的元素
  50. function getActiveEle(eles) {
  51. let activities = [...eles].filter(img => img.classList.contains("active"));
  52. return activities.shift();
  53. }
  54. // 2.设置激活的元素,根据按钮索引更新正在显示的照片
  55. function setActiveEle(btnIndex) {
  56. [imgs, btns].forEach(arr => {
  57. // 将之前的状态全部重置到初始化
  58. getActiveEle(arr).classList.remove("active");
  59. arr.forEach(item => {
  60. if (item.dataset.index === btnIndex) {
  61. item.classList.add("active");
  62. }
  63. });
  64. });
  65. }
  66. // 为小按钮添加事件
  67. btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));
  68. // 1.为轮播图添加左右翻页按钮功能
  69. skip.addEventListener("click", skipImg, false);
  70. skip.children[0].addEventListener("click", skipImg, false);
  71. function skipImg(ev) {
  72. // 当前激活的图片
  73. let currentImg = getActiveEle(imgs);
  74. // 当前图片组父元素
  75. let parentEle = currentImg.parentElement.parentElement;
  76. // 当前元素的前一个 兄弟节点:previousElentSibling
  77. let prevEle = currentImg.parentElement.previousElementSibling;
  78. // 当前元素的下一个兄弟节点:nextElementSibling
  79. let nextEle = currentImg.parentElement.nextElementSibling;
  80. // 第一张图片:firstElementChild第一个子元素
  81. let firstImg = parentEle.firstElementChild.firstElementChild;
  82. // 最后一张图片:firstElementChildm最后一个子元素
  83. let lastImg = parentEle.lastElementChild.firstElementChild;
  84. let activeImg = currentImg;
  85. // 向前翻页
  86. if (ev.target.classList.contains("prev")) {
  87. // 如果存在前一张图片,就是用它,否则就使用最后一张图片来更新它。形成循环显示的效果
  88. let activeImg =
  89. prevEle !== null ? prevEle.firstElementChild : lastImg;
  90. // 使用激活元素来同步更新图片与按钮
  91. setActiveEle(activeImg.dataset.index);
  92. }
  93. // 向后翻页
  94. if (ev.target.classList.contains("next")) {
  95. // 如果不存在下一张图片,就用第一张图片更新它
  96. let activeImg =
  97. nextEle !== null ? nextEle.firstElementChild : firstImg;
  98. setActiveEle(activeImg.dataset.index);
  99. }
  100. }
  101. // 2.让轮播图每隔2秒自动播放
  102. let timer = null;
  103. const slider = document.querySelector(".container");
  104. slider.addEventListener("mouseout", startTimer, false);
  105. slider.addEventListener("mouseover", clearTimer, false);
  106. function startTimer() {
  107. // 创建自定义事件对象
  108. const clickEvent = new Event("click");
  109. timer = setInterval(
  110. () => skip.children[0].dispatchEvent(clickEvent),
  111. 2000
  112. );
  113. }
  114. // 清除定时器
  115. function clearTimer() {
  116. clearInterval(timer);
  117. }
  118. </script>
  119. </div>
  120. </body>
  121. </html>

2. 选项卡

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>选项卡</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. box-sizing: border-box;
  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. line-height: 1.6em;
  23. }
  24. li:hover {
  25. cursor: default;
  26. }
  27. .tabs {
  28. width: 300px;
  29. height: 300px;
  30. margin: 30px;
  31. background-color: #e6e6e6;
  32. display: flex;
  33. flex-direction: column;
  34. border-radius: 10px;
  35. }
  36. .tab {
  37. height: 36px;
  38. display: flex;
  39. }
  40. .tab li {
  41. flex: auto;
  42. text-align: center;
  43. line-height: 36px;
  44. background-color: rgb(0, 248, 153);
  45. border-radius: 10px;
  46. }
  47. .tab li.active {
  48. background-color: lightcyan;
  49. transition: .3s;
  50. }
  51. .tab li:hover {
  52. cursor: pointer;
  53. }
  54. /* 默认所有选项卡只有一个显示,其它隐藏 */
  55. .item {
  56. padding: 20px;
  57. display: none;
  58. }
  59. .item.active {
  60. display: block;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="tabs">
  66. <!-- 导航 -->
  67. <ul class="tab">
  68. <li class="active" data-index="1">最新</li>
  69. <li data-index="2">热门</li>
  70. <li data-index="3">近期</li>
  71. </ul>
  72. <!-- 内容 -->
  73. <ul data-index="1" class="item active">
  74. <li><a href="">新加坡外交家:美国的利益已被富豪绑架</a></li>
  75. <li><a href="">外交部:蓬佩奥为散播政治病毒煞费苦心</a></li>
  76. <li><a href="">18岁离家远行,他们的目的地有点特别</a></li>
  77. <li><a href="">了不起的你——三张照片背后的泪目故事</a></li>
  78. </ul>
  79. <ul data-index="2" class="item">
  80. <li><a href="">憋气30秒可以测试肺部健康 这是真的吗?</a></li>
  81. <li><a href="">李子柒做的泡菜,跟韩国有关系么?</a></li>
  82. <li><a href="">疫情时间线或改写?多国在废水中发现新冠病毒痕迹</a></li>
  83. <li><a href="">国药控股董事长李智明因“个人原因”辞职</a></li>
  84. </ul>
  85. <ul data-index="3" class="item">
  86. <li><a href="">旗袍改中华风lo裙 可用作桃源恋歌打歌服</a></li>
  87. <li><a href="">2020腾讯娱乐年度盛典 年度荣誉由你来推</a></li>
  88. <li><a href="">36岁詹皇冲MVP迎三大利好</a></li>
  89. <li><a href="">煤改气改成了电褥子?网友吐槽农村取暖痛点</a></li>
  90. </ul>
  91. <script>
  92. // 事件代理
  93. const tab = document.querySelector(".tab");
  94. // 获取三个列表
  95. const items = document.querySelectorAll(".item");
  96. tab.onclick = ev => {
  97. // 1.清空之前所有处于激活状态的选项,并将当前点击对象激活
  98. [...tab.children].forEach(item => item.classList.remove("active"));
  99. ev.target.classList.add("active");
  100. // 2.根据自定义属性data-index找到对应的列表显示出来
  101. items.forEach(item => item.classList.remove("active"));
  102. [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");
  103. };
  104. </script>
  105. </div>
  106. </body>
  107. </html>
批改状态:合格

老师批语:

全部评论

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

条评论
  • 博主信息
    吳
    博文
    24
    粉丝
    2
    评论
    0
    访问量
    1577
    积分:0
    P豆:50