标签：function index 选项卡 轮播 Idx classList JS checked children

在Web前端开发的学习过程中，我们会用html, css, javascript等基础知识做一些网站的轮播动画来提升页面的颜值和交互性能，下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图。

轮播图简介：在一个网站的某一特定模块，通过电脑上鼠标点击或鼠标移入、手机上手指滑动后，可以分别展示不同的图片，这个模块就叫做轮播模块。

(做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~)

html布局部分:

<div id="box">
    <div class="scenery pic">
      <img class="show" src="imgs/s2.jpg" alt="scenery">
      <img src="imgs/s3.jpg" alt="scenery">
      <img src="imgs/s1.jpg" alt="scenery">
      <img src="imgs/s5.jpg" alt="scenery">
      <img src="imgs/s4.jpg" alt="scenery">
    </div>
    <div class="car pic">
      <img src="imgs/animal4.jpg" alt="animal">
      <img src="imgs/animal3.jpg" alt="animal">
      <img src="imgs/animal2.jpg" alt="animal">
      <img src="imgs/animal1.jpg" alt="animal">
    </div>
    <div class="food pic">
      <img src="imgs/entertainment1.jpg" alt="entertainment">
      <img src="imgs/entertainment2.jpg" alt="entertainment">
      <img src="imgs/entertainment3.jpg" alt="entertainment">
      <img src="imgs/entertainment4.jpg" alt="entertainment">
      <img src="imgs/entertainment5.jpg" alt="entertainment">
    </div>
    <div class="leftbar">
      <div class="checked">风景</div>
      <div>名车</div>
      <div>娱乐</div>
    </div>
    <div class="bottombar">

    </div>
  </div>

 CSS样式部分:

/* 为了布局方便,容器里大多采用的flex */
#box {
      position: relative;
      width: 460px;
      height: 300px;
      margin: 40px auto;
      border: 1px solid rgb(109, 98, 98);
      user-select: none;
    }
    /* 侧边栏布局 */
    .leftbar {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      top: -1px;
      left: -80px;
      width: 80px;
      height: 100%;
      text-align: center;
      font-size: 20px;
      cursor: pointer;
    }

    .leftbar div {
      flex: 1;
      line-height: 100px;
      background-color: cadetblue;
      letter-spacing: 5px;
    }

    .leftbar div:nth-child(2) {
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }

    /* 底部切换按钮样式设计 */
    .bottombar {
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: -1px;
      right: -1px;
      z-index: 10;
      width: 200px;
      height: 30px;
      cursor: pointer;
    }

    .bottombar div {
      flex: 1;
      line-height: 30px;
      background-color: rgb(232, 233, 235, .5);
      text-align: center;
      font-weight: 700;
    }

    .bottombar div~div {
      border-left: 1px solid grey;
    }

    img {
      position: absolute;
      display: block;
      width: 460px;
      height: 300px;
    }

    .show {
      z-index: 5;
    }

    .leftbar .checked,
    .bottombar .checked {
      background-color: rgb(241, 5, 5);
    }

 javascript逻辑实现部分:

var Box = document.querySelector('#box'), pic = Box.querySelectorAll('.pic'),
    Idx = 0, index = 0, timer = null,
    ltDiv = Box.querySelector('.leftbar'), btDiv = Box.querySelector('.bottombar'),
    Img = Box.querySelectorAll('img');

    function createBtBar(len) {//动态创建底部切换按钮
      var str = '';
      for (var i = 0; i < len; i++) {
        str += `<div>${i + 1}</div>`;
      }
      btDiv.innerHTML = str;
      btDiv.children[0].classList.add('checked');
    }

    function initialize() {//页面初始状态
      createBtBar(pic[0].children.length);
    }
    initialize();

    function clearZindex() {//重置所有图片的定位层级
      for (var k = 0; k < Img.length; k++) {
        Img[k].classList.remove('show');
      }
    }

    ltDiv.addEventListener('click', (e) => {//侧边栏项目切换
      if (e.target.tagName.toLowerCase() === 'div') {
        for (var j = 0; j < ltDiv.children.length; j++) {
          ltDiv.children[j].classList.remove('checked');
        }

        clearZindex();
        Idx = 0;
        index = getEleIdx(e.target);
        ltDiv.children[index].classList.add('checked');
        pic[index].children[0].classList.add('show');
        createBtBar(pic[index].children.length);
      }
    });

    btDiv.addEventListener('click', (e) => {//委托监听底部切换按钮
      if (e.target.tagName.toLowerCase() === 'div') {
        function changePic(callback) {
          btDiv.children[Idx].classList.remove('checked');

          clearZindex();
          callback && callback();
          btDiv.children[Idx].classList.add('checked');
          pic[index].children[Idx].classList.add('show');
        }
        changePic(function () {
          Idx = getEleIdx(e.target);
        });
      }
    });

    function getEleIdx(item) {//获取DOM元素下标
      var elements = item.parentNode.children;
      for (var i = 0, len = elements.length; i < len; i++) {
        if (item === elements[i]) {
          return i;
        }
      }
    }

    function loopShow() {//循环自动展示
      clearInterval(timer);
      timer = setInterval(function () {
        pic[index].children[Idx].classList.remove('show');
        btDiv.children[Idx].classList.remove('checked');
        Idx += 1;
        if (Idx < 0 || Idx > pic[index].children.length - 1) {
          Idx = 0;
        }
        pic[index].children[Idx].classList.add('show');
        btDiv.children[Idx].classList.add('checked');
      }, 1000);
    }

    loopShow();

    Box.addEventListener('mouseover', function () {
      clearInterval(timer);//鼠标移入展示区停止轮播
    });
    Box.addEventListener('mouseout', function () {
      loopShow();//鼠标移出展示区自动轮播
    });

 具体实现的展示效果入下:

 (Tip: 各位注意自行准备图片放到自己的文件夹里哦~)

标签：function,index,选项卡,轮播,Idx,classList,JS,checked,children
来源： https://blog.csdn.net/sv_Reg/article/details/120383400

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。