您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

JS实现多重选项卡切换轮播图

51自学网 2022-05-02 21:30:38
  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="entertainment 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: 各位注意自行准备图片放到自己的文件夹里哦~)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


mac下彻底卸载node和npm方法步骤
vue利用插件实现按比例切割图片
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1