search

博客列表 >实例演示轮播图和选项卡

实例演示轮播图和选项卡

早晨
早晨原创
2022年07月29日 00:46:20479浏览

轮播图演示代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>图片轮播</title>
  8.     <style>
  9.       .lb-box {
  10.         width: 98%;
  11.         margin: auto;
  12.         position: relative;
  13.         overflow: hidden;
  14.       }
  15.       @media (max-width: 568px) {
  16.         .lb-box {
  17.           width: 98%;
  18.         }
  19.       }
  21.       .lb-content {
  22.         width: 100%;
  23.         height: 100%;
  24.       }
  26.       .lb-item {
  27.         width: 100%;
  28.         height: 100%;
  29.         display: none;
  30.         position: relative;
  31.       }
  33.       .lb-item > a {
  34.         width: 100%;
  35.         height: 100%;
  36.         display: block;
  37.       }
  39.       .lb-item > a > img {
  40.         width: 100%;
  41.         height: 100%;
  42.       }
  44.       .lb-item > a > span {
  45.         width: 100%;
  46.         display: block;
  47.         position: absolute;
  48.         bottom: 0px;
  49.         padding: 15px;
  50.         color: #fff;
  51.         background-color: rgba(0, 0, 0, 0.7);
  52.       }
  53.       @media (max-width: 568px) {
  54.         .lb-item > a > span {
  55.           padding: 10px;
  56.         }
  57.       }
  59.       .lb-item.active {
  60.         display: block;
  61.         left: 0%;
  62.       }
  63.       .lb-item.active.left {
  64.         left: -100%;
  65.       }
  66.       .lb-item.active.right {
  67.         left: 100%;
  68.       }
  70.       /*  */
  71.       .lb-item.next,
  72.       .lb-item.prev {
  73.         display: block;
  74.         position: absolute;
  75.         top: 0px;
  76.       }
  77.       .lb-item.next {
  78.         left: 100%;
  79.       }
  80.       .lb-item.prev {
  81.         left: -100%;
  82.       }
  83.       .lb-item.next.left,
  84.       .lb-item.prev.right {
  85.         left: 0%;
  86.       }
  88.       .lb-sign {
  89.         position: absolute;
  90.         bottom: 0;
  91.         left: 35%;
  92.         padding: 5px 3px;
  93.         border-radius: 6px;
  94.         list-style: none;
  95.         user-select: none;
  96.         background-color: rgba(0, 0, 0, 0.7);
  97.       }
  99.       .lb-sign li {
  100.         width: 22px;
  101.         height: 20px;
  102.         font-size: 14px;
  103.         font-weight: 500;
  104.         line-height: 20px;
  105.         text-align: center;
  106.         float: left;
  107.         color: #aaa;
  108.         margin: auto 4px;
  109.         border-radius: 3px;
  110.         cursor: pointer;
  111.       }
  112.       .lb-sign li:hover {
  113.         color: #fff;
  114.       }
  115.       .lb-sign li.active {
  116.         color: #000;
  117.         background-color: #ebebeb;
  118.       }
  120.       .lb-ctrl {
  121.         position: absolute;
  122.         top: 50%;
  123.         transform: translateY(-50%);
  124.         font-size: 50px;
  125.         font-weight: 900;
  126.         user-select: none;
  127.         background-color: rgba(0, 0, 0, 0.7);
  128.         color: #fff;
  129.         border-radius: 5px;
  130.         cursor: pointer;
  131.         transition: all 0.1s linear;
  132.       }
  133.       @media (max-width: 568px) {
  134.         .lb-ctrl {
  135.           font-size: 30px;
  136.         }
  137.       }
  138.       .lb-ctrl.left {
  139.         left: -50px;
  140.       }
  141.       .lb-ctrl.right {
  142.         right: -50px;
  143.       }
  144.       .lb-box:hover .lb-ctrl.left {
  145.         left: 10px;
  146.       }
  147.       .lb-box:hover .lb-ctrl.right {
  148.         right: 10px;
  149.       }
  150.       .lb-ctrl:hover {
  151.         background-color: #000;
  152.       }
  153.     </style>
  154.     <script>
  155.       class Lb {
  156.         constructor(options) {
  157.           this.lbBox = document.getElementById(options.id);
  158.           this.lbItems = this.lbBox.querySelectorAll(".lb-item");
  159.           this.lbSigns = this.lbBox.querySelectorAll(".lb-sign li");
  160.           this.lbCtrlL = this.lbBox.querySelectorAll(".lb-ctrl")[0];
  161.           this.lbCtrlR = this.lbBox.querySelectorAll(".lb-ctrl")[1];
  163.           // 当前图片索引
  164.           this.curIndex = 0;
  165.           // 轮播盒内图片数量
  166.           this.numItems = this.lbItems.length;
  168.           // 是否可以滑动
  169.           this.status = true;
  171.           // 轮播速度
  172.           this.speed = options.speed || 600;
  173.           // 等待延时
  174.           this.delay = options.delay || 3000;
  176.           // 轮播方向
  177.           this.direction = options.direction || "left";
  179.           // 是否监听键盘事件
  180.           this.moniterKeyEvent = options.moniterKeyEvent || false;
  181.           // 是否监听屏幕滑动事件
  182.           this.moniterTouchEvent = options.moniterTouchEvent || false;
  184.           this.handleEvents();
  185.           this.setTransition();
  186.         }
  188.         // 开始轮播
  189.         start() {
  190.           const event = {
  191.             srcElement: this.direction == "left" ? this.lbCtrlR : this.lbCtrlL,
  192.           };
  193.           const clickCtrl = this.clickCtrl.bind(this);
  195.           // 每隔一段时间模拟点击控件
  196.           this.interval = setInterval(clickCtrl, this.delay, event);
  197.         }
  199.         // 暂停轮播
  200.         pause() {
  201.           clearInterval(this.interval);
  202.         }
  204.         /**
  205.          * 设置轮播图片的过渡属性
  206.          * 在文件头内增加一个样式标签
  207.          * 标签内包含轮播图的过渡属性
  208.          */
  209.         setTransition() {
  210.           const styleElement = document.createElement("style");
  211.           document.head.appendChild(styleElement);
  212.           const styleRule = `.lb-item {transition: left ${this.speed}ms ease-in-out}`;
  213.           styleElement.sheet.insertRule(styleRule, 0);
  214.         }
  216.         // 处理点击控件事件
  217.         clickCtrl(event) {
  218.           if (!this.status) return;
  219.           this.status = false;
  220.           if (event.srcElement == this.lbCtrlR) {
  221.             var fromIndex = this.curIndex,
  222.               toIndex = (this.curIndex + 1) % this.numItems,
  223.               direction = "left";
  224.           } else {
  225.             var fromIndex = this.curIndex;
  226.             (toIndex = (this.curIndex + this.numItems - 1) % this.numItems),
  227.               (direction = "right");
  228.           }
  229.           this.slide(fromIndex, toIndex, direction);
  230.           this.curIndex = toIndex;
  231.         }
  233.         // 处理点击标志事件
  234.         clickSign(event) {
  235.           if (!this.status) return;
  236.           this.status = false;
  237.           const fromIndex = this.curIndex;
  238.           const toIndex = parseInt(event.srcElement.getAttribute("slide-to"));
  239.           const direction = fromIndex < toIndex ? "left" : "right";
  240.           this.slide(fromIndex, toIndex, direction);
  241.           this.curIndex = toIndex;
  242.         }
  244.         // 处理各类事件
  245.         handleEvents() {
  246.           // 鼠标移动到轮播盒上时继续轮播
  247.           this.lbBox.addEventListener("mouseleave", this.start.bind(this));
  248.           // 鼠标从轮播盒上移开时暂停轮播
  249.           this.lbBox.addEventListener("mouseover", this.pause.bind(this));
  251.           // 点击左侧控件向右滑动图片
  252.           this.lbCtrlL.addEventListener("click", this.clickCtrl.bind(this));
  253.           // 点击右侧控件向左滑动图片
  254.           this.lbCtrlR.addEventListener("click", this.clickCtrl.bind(this));
  256.           // 点击轮播标志后滑动到对应的图片
  257.           for (let i = 0; i < this.lbSigns.length; i++) {
  258.             this.lbSigns[i].setAttribute("slide-to", i);
  259.             this.lbSigns[i].addEventListener(
  260.               "click",
  261.               this.clickSign.bind(this)
  262.             );
  263.           }
  264.         }
  266.         slide(fromIndex, toIndex, direction) {
  267.           this.lbSigns[fromIndex].className = "";
  268.           this.lbSigns[toIndex].className = "active";
  270.           setTimeout(
  271.             (() => {
  272.               this.lbItems[fromIndex].className = "lb-item";
  273.               this.lbItems[toIndex].className = "lb-item active";
  274.               this.status = true; // 设置为可以滑动
  275.             }).bind(this),
  276.             this.speed + 50
  277.           );
  278.         }
  279.       }
  281.       window.onload = function () {
  282.         // 轮播选项
  283.         const options = {
  284.           id: "lb-1", // 轮播盒ID
  285.           speed: 600, // 轮播速度(ms)
  286.         };
  287.         const lb = new Lb(options);
  288.         lb.start();
  289.       };
  290.     </script>
  291.   </head>
  293.   <body>
  294.     <div class="lb-box" id="lb-1">
  295.       <!-- 轮播内容 -->
  296.       <div class="lb-content">
  297.         <div class="lb-item active">
  298.           <img src="images/t1.png" alt="" style="width: 100%" />
  299.         </div>
  300.         <div class="lb-item">
  301.           <img src="images/t2.png" alt="" style="width: 100%" />
  302.         </div>
  303.         <div class="lb-item">
  304.           <img src="images/t3.png" alt="" style="width: 100%" />
  305.         </div>
  306.         <div class="lb-item">
  307.           <img src="images/t4.png" alt="" style="width: 100%" />
  308.         </div>
  309.       </div>
  310.       <!-- 轮播标志 -->
  311.       <ol class="lb-sign">
  312.         <li class="active">1</li>
  313.         <li>2</li>
  314.         <li>3</li>
  315.         <li>4</li>
  316.       </ol>
  317.       <!-- 轮播控件 -->
  318.       <div class="lb-ctrl left">＜</div>
  319.       <div class="lb-ctrl right">＞</div>
  320.     </div>
  321.   </body>
  322. </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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         list-style: none;
  13.       }
  14.       body {
  15.         font-size: 12px;
  16.         color: #666;
  17.         text-align: left;
  18.       }
  19.       h1 {
  20.         text-align: center;
  21.       }
  23.       .zzsc {
  24.         width: 500px;
  25.         height: 200px;
  26.         margin: 100px auto;
  27.         background: #f0f0f0;
  28.         font-family: "微软雅黑";
  29.       }
  30.       .zzsc .tab {
  31.         overflow: hidden;
  32.         background: #ccc;
  33.       }
  34.       .zzsc .tab a {
  35.         display: block;
  36.         padding: 10px 20px;
  37.         float: left;
  38.         text-decoration: none;
  39.         color: #333;
  40.       }
  41.       .zzsc .tab a:hover {
  42.         background: #e64e3f;
  43.         color: #fff;
  44.         text-decoration: none;
  45.       }
  46.       .zzsc .tab a.on {
  47.         background: #e64e3f;
  48.         color: #fff;
  49.         text-decoration: none;
  50.       }
  51.       .zzsc .list {
  52.         display: none;
  53.       }
  54.       .zzsc .list.on {
  55.         display: block;
  56.       }
  57.       /* .zzsc .list li {
  58.         display: none;
  59.       } */
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="zzsc">
  64.       <!-- 标签 -->
  65.       <div class="tab">
  66.         <a href="" class="on" data-index="1">国际新闻</a>
  67.         <a href="" data-index="2">国内新闻</a>
  68.         <a href="" data-index="3">社会民生</a>
  69.         <a href="" data-index="4">本地新闻</a>
  70.       </div>
  71.       <!-- 内容列表 -->
  72.       <ul class="list on" data-index="1">
  73.         <li>1.国际新闻</li>
  74.         <li>2.国际新闻</li>
  75.         <li>3.国际新闻</li>
  76.         <li>4.国际新闻</li>
  77.       </ul>
  78.       <ul class="list" data-index="2">
  79.         <li>1.国内新闻</li>
  80.         <li>2.国内新闻</li>
  81.         <li>3.国内新闻</li>
  82.         <li>4.国内新闻</li>
  83.       </ul>
  84.       <ul class="list" data-index="3">
  85.         <li>1.社会民生</li>
  86.         <li>2.社会民生</li>
  87.         <li>3.社会民生</li>
  88.         <li>4.社会民生</li>
  89.       </ul>
  90.       <ul class="list" data-index="4">
  91.         <li>1.本地新闻</li>
  92.         <li>2.本地新闻</li>
  93.         <li>3.本地新闻</li>
  94.         <li>4.本地新闻</li>
  95.       </ul>
  96.     </div>
  98.     <script>
  99.       const tab = document.querySelector(".tab");
  100.       //   console.log(tab);
  101.       tab.addEventListener("click", show, false);
  102.       tab.addEventListener("mouseover", show, false);
  103.       function show() {
  104.         event.preventDefault();
  105.         const btns = [...event.currentTarget.children];
  106.         // console.log(btns);
  107.         const on = document.querySelectorAll(".list");
  108.         // console.log(on);
  109.         btns.forEach((item) => item.classList.remove("on"));
  110.         event.target.classList.add("on");
  111.         on.forEach((item) => item.classList.remove("on"));
  112.         [...on]
  113.           .find((list) => list.dataset.index === event.target.dataset.index)
  114.           .classList.add("on");
  115.       }
  116.     </script>
  117.   </body>
  118. </html>

运行效果

上一条：JavaScript的DOM事件流和字符串API下一条：伪数组与dom常用api
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多