博客列表 >JS经典轮播图和选项卡

JS经典轮播图和选项卡

#三生
#三生原创
2022年01月11日 00:16:10648浏览

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>
示例图:

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