欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS经典轮播图和选项卡

程序员文章站 2022-05-16 21:24:15
...

1. 选项卡

示例代码:
  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. .box {
  10. width: 100vw;
  11. }
  12. .box ul {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. .box .menu li {
  17. display: inline-block;
  18. }
  19. .box .menu li:hover {
  20. cursor: pointer;
  21. }
  22. .box .menu li.active {
  23. background-color: lightgreen;
  24. }
  25. .box .content {
  26. background-color: lightgreen;
  27. text-align: center;
  28. height: 120px;
  29. width: 100vw;
  30. display: none;
  31. }
  32. .box .content.active {
  33. display: inline-block;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="box">
  39. <!-- 1. 标签 -->
  40. <ul class="menu" onclick="show()">
  41. <li data-index="1" class="active">内容1</li>
  42. <li data-index="2">内容2</li>
  43. <li data-index="3">内容3</li>
  44. <li data-index="4">内容4</li>
  45. </ul>
  46. <!-- 2. 内容 -->
  47. <div class="container">
  48. <section class="content active" data-index="1">内容1</section>
  49. <section class="content" data-index="2">内容2</section>
  50. <section class="content" data-index="3">内容3</section>
  51. <section class="content" data-index="4">内容4</section>
  52. </div>
  53. </div>
  54. <script>
  55. function show() {
  56. // 事件绑定
  57. const ul = event.currentTarget;
  58. // 事件触发者
  59. const li = event.target;
  60. // 1. 将原高亮的标签去掉高亮样式,并把当前点击的标签设置为高亮
  61. [...ul.children].forEach(li => li.classList.remove("active"));
  62. li.classList.add("active");
  63. // 2. 根据标签的自定义索引属性来确定应该显示哪个列表
  64. // const uls = document.querySelectorAll(".content");
  65. document.querySelectorAll(".content").forEach(li => li.classList.remove("active"));
  66. // data-index === 左面的标签的data-index
  67. // const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
  68. [...document.querySelectorAll(".content")]
  69. .find(ul => ul.dataset.index === li.dataset.index)
  70. .classList.add("active");
  71. // content.classList.add("active");
  72. }
  73. </script>
  74. </body>
  75. </html>
示例图:

JS经典轮播图和选项卡

2. 经典轮播图案例

示例代码:
  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. .slider {
  10. max-width: 750px;
  11. min-width: 320px;
  12. margin: auto;
  13. padding: 0 10px;
  14. }
  15. .slider .imgs {
  16. /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  17. height: 150px;
  18. }
  19. .slider .imgs img {
  20. /* 图片完全充满父级空间显示 */
  21. height: 100%;
  22. width: 100%;
  23. /* 图片带有圆角 */
  24. border-radius: 10px;
  25. /* 默认图片全部隐藏,只有有active的图片才显示 */
  26. display: none;
  27. }
  28. /* 默认显示第一张 */
  29. .slider .imgs img.active {
  30. display: block;
  31. }
  32. /* 轮播图按钮组 */
  33. .slider .btns {
  34. /* 按钮水平一排显示,用flex,且水平居中 */
  35. display: flex;
  36. place-content: center;
  37. }
  38. .slider .btns span {
  39. /* 按钮宽高相同,确定显示成一个正圆 */
  40. width: 8px;
  41. height: 8px;
  42. /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  43. background-color: rgba(255, 255, 255, 0.4);
  44. /* 50%可确保显示为正圆 */
  45. border-radius: 50%;
  46. /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  47. margin: -12px 3px 5px;
  48. }
  49. .slider .btns span.active {
  50. background-color: #fff;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="slider">
  56. <!-- 图片容器 -->
  57. <div class="imgs">
  58. <!-- 轮播图默认从第一张开始显示 -->
  59. <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
  60. <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
  61. <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></a>
  62. </div>
  63. <!-- 切换按钮数量与图片数量必须一致 -->
  64. <div class="btns">
  65. <span data-index="1" class="active" onclick="setActive()"></span>
  66. <span data-index="2" onclick="setActive()"></span>
  67. <span data-index="3" onclick="setActive()"></span>
  68. </div>
  69. </div>
  70. <script>
  71. // 1. 获取全部图片与按钮
  72. const imgs = document.querySelectorAll(".slider .imgs img");
  73. const btns = document.querySelectorAll(".slider .btns span");
  74. // 2. 设置激活状态
  75. function setActive() {
  76. // 1. 清空图片所按钮的激活状态
  77. imgs.forEach(img => img.classList.remove("active"));
  78. btns.forEach(btn => btn.classList.remove("active"));
  79. // 2.根据按钮的索引来确定应该将哪一张图片显示出来
  80. event.target.classList.add("active");
  81. imgs.forEach(img => {
  82. if (img.dataset.index === event.target.dataset.index) {
  83. img.classList.add("active");
  84. }
  85. });
  86. }
  87. // 3. 定时播放
  88. // 用到"事件派发器",来自动的模拟手工点击
  89. setInterval(
  90. function(arr) {
  91. // 使这个数组首尾相接实现无限循环效果
  92. let i = arr.shift();
  93. btns[i].dispatchEvent(new Event("click"));
  94. arr.push(i);
  95. },
  96. 2000,
  97. Object.keys(btns)
  98. );
  99. </script>
  100. </body>
  101. </html>