Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to realize multi-tab switching and rotation in JS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

A brief introduction to the carousel map: in a specific module of a website, different pictures can be displayed respectively after clicking or moving the mouse on the computer and sliding the fingers on the mobile phone. This module is called the carousel module.

Html layout section:

Scenic car entertainment

CSS style section:

/ * for convenience of layout, flex * / # box {position: relative; width: 460px; height: 300px; margin: 40px auto; border: 1px solid rgb (109,98,98); user-select: none;} / * sidebar layout * / .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;} / * bottom toggle button style design * / .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 .neighbors, .bottombar .background-color: rgb (241,5,5);}

Javascript logic implementation part:

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) {/ / dynamically create bottom toggle button var str ='; for (var I = 0; I)

< len; i++) { str += `${i + 1}`; } btDiv[xss_clean] = 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) =>

{/ / Sidebar item toggle 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) =>

{/ / entrust the bottom toggle button if (e.target.tagName.toLowerCase ()) = = 'div') {function changePic (callback) {btDiv.children.classList.remove (' checked'); clearZindex (); callback & & callback (); btDiv.children.classList.add ('checked'); [index]. Children.classList.add (' show') } changePic (function () {Idx = getEleIdx (e.target);}); function getEleIdx (item) {/ / get DOM element subscript var elements = item [XSS _ clean] .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.classList.add ('show'); btDiv.children.classList.add (' checked');}, 1000);} loopShow (); Box.addEventListener ('mouseover', function () {clearInterval (timer); / mouse move into the display area to stop rotation}) Box.addEventListener ('mouseout', function () {loopShow (); / / automatic carousel when the mouse moves out of the display area})

The display effect of the specific implementation is as follows:

This is the end of the article on "how to achieve multi-tab switching rotation map in JS". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.