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

This article introduces the knowledge of "how to use js to click buttons to achieve multiple picture cycle switching". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The details are as follows

Code:

Click the button to switch multiple images in a loop * {margin: 0; padding: 0;} .img-wrapper {width: 520px; height: 520px; background-size: contain; overflow: hidden Margin: 50px auto; background-color: green;}. Img-wrapper img {width: 533px; height: 300px;} .img-wrapper p {text-align: center; height: 20px; line-height: 20px Font-size: 16px; margin-bottom: 10px; margin-top: 8px;}. Img-wrapper button {margin: 12px 93px; font-size: 18px } _ window.onload = function () {let prev = document.getElementById ("prev"); let next = document.getElementById ("next"); let img = document.getElementsByTagName ("img") [0]; let info = document.getElementById ("info") / / create an array of paths to store photos let imgArr = ["img/111.jpg", "img/222.jpg", "img/333.jpg", "img/444.jpg", "img/555.jpg", "img/666.jpg"]; let index = 0 Info.innerText = "Total" + imgArr.length + "photos, now" + (index + 1) + "Zhang"; prev.onclick = function () {index--; prev.style.backgroundColor= "# ff4c31"; if (index

< 0) { index = imgArr.length - 1; } img.src = imgArr[index]; info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张"; }; next.onclick = function () { index++; next.style.backgroundColor="#ff4c31"; if (index >

ImgArr.length-1) {index = 0;} img.src = imgArr [index]; info.innerText = "altogether" + imgArr.length + "photo", now "+ (index + 1) +" Zhang;};}

The previous one, the next one.

Effect:

"how to use js to click the button to achieve multiple picture cycle switch" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.