选项卡、轮播图实例

程序员文章站 2022-03-27 08:26:50

...

选项卡实例


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS选项卡实例</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .container {
        width: 28em;
        height: 18em;
        display: flex;
        flex-direction: column;
        margin: auto;
        background-color: #eef5d2;
      }
      .container > div {
        margin-top: 1.125rem;
        background-color: #fff;
        display: grid;
        grid-template-columns: repeat(3, 8rem);
        justify-content: center;
        gap: 1.5rem;
      }
      .container > div > span {
        margin-right: 1.125rem;
      }
      .container > div > span:nth-of-type(2) {
        background-color: #dfa1fc;
      }

      .container .content {
        display: none;
      }
      .container .content.active {
        display: grid;
        grid-template-columns: repeat(3, 8rem);
        justify-content: center;
        gap: 1.5rem;
      }
      .container .menu button.active {
        background-color: #8bf8ea;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 1. 标签 -->
      <div class="menu" onclick="show()">
        <button type="button" data-index="1" class="active">手机</button>
        <button type="button" data-index="2">平板</button>
        <button type="button" data-index="3">电脑</button>
      </div>

      <!-- 2. 内容 -->
      <div class="content active" data-index="1">
        <span><a href="">iphone11</a></span>
        <span><a href="">iphone12</a></span>
        <span><a href="">iphone13</a></span>
      </div>

      <div class="content" data-index="2">
        <span><a href="">iPad mini</a></span>
        <span><a href="">iPad mini</a></span>
        <span><a href="">iPad mini</a></span>
      </div>

      <div class="content" data-index="3">
        <span><a href="">MacBook Air</a></span>
        <span><a href="">MacBook Pro</a></span>
        <span><a href="">MacBook Pro 2022</a></span>
      </div>
    </div>
    <script>
      function show() {
        // 1. 将原高亮的标签去掉高亮样式,并把当前点击的标签设置为高亮
        [...event.currentTarget.children].forEach((span) =>
          span.classList.remove("active")
        );
        event.target.classList.add("active");

        // 2. 根据标签的自定义索引属性来确定应该显示哪个列表
        // const uls = document.querySelectorAll(".content");
        document
          .querySelectorAll(".content")
          .forEach((span) => span.classList.remove("active"));

        // data-index === 左面的标签的data-index
        // const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
        [...document.querySelectorAll(".content")]
          .find((div) => div.dataset.index === event.target.dataset.index)
          .classList.add("active");
        // content.classList.add("active");
      }
    </script>
  </body>
</html>

http://help10086.cn/%E9%80%89%E9%A1%B9%E5%8D%A1%E3%80%81%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%AE%9E%E4%BE%8B/demo1.html

轮播图实例


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图实例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .swiper {
        width: 1226px;
        height: 460px;
        margin: 0 auto;
        position: relative;
      }
      .swiper > .imgList {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .swiper > .imgList > .imgItem {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 0.5s;
      }

      .swiper > .imgList > .imgItem.active {
        opacity: 1;
      }
      .swiper .btn.pre {
        width: 80px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #00000099;
        color: #fff;

        position: absolute;
        top: calc(50% - 30px);
        font-size: 30px;
      }

      .swiper .btn.next {
        width: 80px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #00000099;
        color: #fff;

        position: absolute;
        top: calc(50% - 30px);
        right: 0;
        font-size: 30px;
      }

      /* 设置4个小圆 */
      .swiper > .circleList {
        width: 100%;
        height: 80px;
        display: flex;
        padding: 0 30px;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 0;
      }

      .swiper > .circleList > .circleItem {
        width: 10px;
        height: 10px;
        border: 2px solid #999;
        background-color: #666;
        border-radius: 5px;
        margin: 0 3px;
      }

      /* 第一个圆默认，填充颜色  */
      .swiper > .circleList > .circleItem.active {
        background-color: #ccc;
        border: 2px solid #666;
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <div class="imgList">
        <img class="imgItem active" src="images/img_1.jpg" alt="" />
        <img class="imgItem" src="images/img_1.jpg" alt="" />
        <img class="imgItem" src="images/img_2.jpg" alt="" />
        <img class="imgItem" src="images/img_3.jpg" alt="" />
        <img class="imgItem" src="images/img_4.jpg" alt="" />
        <img class="imgItem" src="images/img_5.jpg" alt="" />
      </div>

      <div class="btnList">
        <div class="btn pre"><</div>
        <div class="btn next">></div>
      </div>

      <!-- 4个小圆形 -->
      <div class="circleList">
        <div id="c0" class="circleItem active"></div>
        <div id="c1" class="circleItem"></div>
        <div id="c2" class="circleItem"></div>
        <div id="c3" class="circleItem"></div>
        <div id="c4" class="circleItem"></div>
      </div>
    </div>

    <script type="text/javascript">
      /* 按钮（上） */
      let preBtn = document.querySelector(".swiper .pre");
      /* 按钮（下） */
      let nextBtn = document.querySelector(".swiper .next");
      /* 图片列表 */
      let imgListDivs = document.querySelectorAll(".swiper .imgItem");
      /* 圆点列表 */
      let circleDivs = document.querySelectorAll(".swiper .circleItem");

      let currentImg = 0; /* 记录当前位置*/

      console.log(imgListDivs);

      //下一张图
      nextBtn.onclick = function () {
        currentImg = currentImg + 1;
        if (currentImg >= imgListDivs.length) {
          currentImg = 0;
        }
        renderNumImg();
      };

      //上一张图
      preBtn.onclick = function () {
        currentImg = currentImg - 1;
        if (currentImg < 0) {
          currentImg = imgListDivs.length - 1;
        }
        renderNumImg();
      };

      function renderNumImg() {
        //初始化，将所有的img列表的activ去掉
        imgListDivs.forEach(function (item, i) {
          item.classList.remove("active");
        });

        //去掉小圆
        circleDivs.forEach(function (item, i) {
          item.classList.remove("active"); /* 移除*/
        });

        //圆点跟着，切换（添加）
        imgListDivs[currentImg].classList.add("active");
        circleDivs[currentImg].classList.add("active");

        //设置点小圆，图片也跟着同步
        circleDivs.forEach(function (item, i) {
          console.log(item);
          item.onclick = function () {
            currentImg = i; //把当前的的位置给currentImg
            console.log(i);
            renderNumImg(); //再调用函数
          };
        });
      }
    </script>
  </body>
</html>

http://help10086.cn/%E9%80%89%E9%A1%B9%E5%8D%A1%E3%80%81%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%AE%9E%E4%BE%8B/demo3.html

上一篇： php的运行原理和变量类型

下一篇： jQuery-1.9.1源码分析系列（十）事件系统之事件包装_jquery

选项卡、轮播图实例

选项卡实例

轮播图实例

Android下拉刷新与轮播图滑动冲突解决方案

HTML学习之轮播图

Android编程之TabWidget选项卡用法实例分析

Android实现轮播图无限循环效果

C#生成饼形图及添加文字说明实例代码

iOS实现带有缩放效果的自动轮播图

DevExpress之ChartControl实现饼状图百分比演示实例

Android RollPagerView实现轮播图

DevExpress之ChartControl实现柱状图演示实例

IOS 开发之网络图片轮播图的实现