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

This article mainly shows you "js how to achieve simple round picture effect", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "js how to achieve simple round picture effect" this article.

The details are as follows

Picture switching using transform = translateX ()

.box {position: relative; overflow: hidden; margin: 200px auto; width: 600px; height: 400px;} .img {width: 3000px; height: 400px;} img {float: left; width: 600px Height: 400px;} .btn {position: absolute; top: 350px; left: 245px; width: 110px; height: 20px;} .dian {float: left; margin: 5px; width: 12px; height: 12px Border-radius: 50%; background-color: rgba (255,255,255,0.3); cursor: pointer;} .left, .right {display: none; box-sizing: border-box; position: absolute; top: 150px; width: 50px Height: 100px; background-color: rgba (0,0,0, 0.521); font-size: 40px; line-height: 100px; color: # fff;} .box: hover .left, .box: hover .right {display: block } .left {padding-left: 10px; left: 0;} .right {padding-right: 10px; text-align: right; right: 0;}

Var btn = document.getElementsByClassName ('btn') [0]; var imgBox = document.getElementsByClassName (' img') [0]; var imgs = imgBox.getElementsByTagName ('img'); var btnChild = document.getElementsByClassName (' dian'); var k = 0; / / add custom attribute for to the button (var I = 0; I < btnChild.length; iTunes +) {btnChild.dataset.num = I * 600 Default is the first picture, and the first button is white btnChild [0] .style.background = 'rgba (255,255,255,0.8)'. / / Click the button to switch the picture, and the button changes color btn.onclick = function (e) {if (e.target.nodeName = 'SPAN') {/ / Let all buttons be the default color for (var I = 0; I < btnChild.length) first Console.log +) {btnChild [I] .style.background = 'rgba (255,255,255,0.4)';} / / the button clicked changes color k = + e.target.dataset.numm; console.log (k); btnChild [k / 600] .style.background = 'rgba (255,255,255,0.8)' / / switch picture imgBox.style.transform = `picture (- ${e.target.dataset.num} px) `;}} / / get picture length / / var imgWidth = + getComputedStyle (imgs [0]) .width.slice (0,-2); var imgWidth = imgs [0] .offsetWidth / / timer moves picture var interval1 = setInterval (move, 1000); var interval; / / function moves picture and changes button function move () {k + = imgWidth; if (k = imgWidth * imgs.length) {k = 0 } / / move the picture imgBox.style.transform = `picture (- ${k} px) `; / / change the button color for (var I = 0; I < btnChild.length; iTunes +) {btnChild.style.background = 'rgba (255,255,255,0.4)' } btnChild [k / 600] .style.background = 'rgba (255,255,255,0.8)';} / / move the mouse over the picture to delete the timer var box = document.getElementsByClassName ('box') [0]; box.onmouseover = function () {clearInterval (interval1); clearInterval (interval) } / / start timer box.onmouseout = function () {interval = setInterval (move, 1000);} var leftBtn = document.getElementsByClassName ('left') [0]; var rightBtn = document.getElementsByClassName (' right') [0]; rightBtn.onclick = function () {k + = imgWidth If (k = = imgWidth * imgs.length) {k = 0;} / move the picture imgBox.style.transform = `translateX (- ${k} px) `; / / change the button color for (var I = 0; I < btnChild.length) Background = 'rgba (255,255,255,0.4)';} btnChild [k / 600] .style.background = 'rgba (255,255,255,0.8)';} leftBtn.onclick = function () {k-= imgWidth If (k < 0) {k = imgWidth * (imgs.length-1);} imgBox.style.transform = `translateX (- ${k} px) `; / / change button color for (var I = 0; I < btnChild.length) Background = 'rgba (255,255,255,0.4)';} btnChild [k / 600] .style.background = 'rgba (255,255,255,0.8)';}

Effect picture:

The above is all the content of the article "how to achieve simple broadcast effect in js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.