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
Tip: The following operations are all performed u...
Table of contents Preface Related Materials Vue p...
During development, I encountered such a requireme...
What is the function of this key attribute? Let’s...
This article introduces a framework made by Frame...
Table of contents 1:mysql execution process 1.1: ...
MySQL Workbench - Modeling and design tool 1. Mod...
Table of contents 1. Introduction 2. Environment ...
Recently I changed Apache to nginx. When I moved ...
Overview: Oracle scott user has four tables, whic...
Table of contents Preface 1. Basic usage of liste...
Use HTML to write a dynamic web clock. The code i...
This article example shares the implementation of...
Table of contents 1. What is Dockerfile? 2. Analy...
Table of contents Preface 1. Use for...of to iter...