JS实现多重选项卡切换轮播图
作者:sv_Reg
这篇文章主要为大家详细介绍了JS实现多重选项卡切换轮播图制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用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: 各位注意自行准备图片放到自己的文件夹里哦~)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。