This article shares the specific code of JavaScript to switch multiple pictures for your reference. The specific content is as follows Cycle through images HTML part <body> <div class="outer"> <p id="info"></p> <img src="./images/banner1.png" alt="Image" title="Image"> <button id='prev'>Previous</button> <button id='next'>Next</button> </div> </body> CSS part <style> * { padding: 0; margin: 0; } .outer { width: 1000px; background-color: #bfa; margin: 50px auto; text-align: center; padding: 10px; } img { width: 900px; display: block; margin: 0 auto; } button { margin: 5px; } </style> JavaScript JavaScript DOM object is used here <script> // Load the document window.onload = function () { //Get the img tag var img = document.getElementsByTagName("img")[0]; //Create an array to save the paths of all pictures //Set the path of the picture file here var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"]; //Set the initial value of the image var index = 0; //Get the p tag with id info var info = document.getElementById("info"); info.innerHTML = "Total" + imgArr.length + "pieces," + "Current is" + (index + 1) + "pieces"; //Bind two buttons //Previous document.getElementById("prev").onclick = function () { index--; // Check if index is less than 0 if (index < 0) { index = imgArr.length - 1; //Loop (first picture -> last picture) } img.src = imgArr[index]; info.innerHTML = "Total" + imgArr.length + "pieces," + "Current is" + (index + 1) + "pieces"; }; //Next document.getElementById("next").onclick = function () { index++; //Judge whether index is greater than the length of the array - 1 (the maximum subscript of the array) if (index > imgArr.length - 1) { index = 0; //Loop (last picture -> first picture) } img.src = imgArr[index]; info.innerHTML = "Total" + imgArr.length + "pieces," + "Current is" + (index + 1) + "pieces"; } }; </script> Preview effect: The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of Tomcat's Server Options
>>: Manually install mysql5.7.10 on Ubuntu
Quick solution for forgetting MYSQL database pass...
Table of contents Requirement Description Problem...
Table of contents Preface 1. unknown vs any 2. Th...
Syntax composition: 1 Annotation information 2 Co...
Table of contents 1. Download the installation pa...
1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...
Linux builds NFS server In order to achieve data ...
a and href attributes HTML uses <a> to repr...
Table of contents Written in front Login Overview...
Vue+iview menu and tab linkage I am currently dev...
Block-level element features : •Always occupies a ...
Preface As we all know, JavaScript is single-thre...
Let's take a look at the code file structure ...
Preface Recently I found that my friend's met...
Table of contents variable Data Types Extension P...