JavaScript to switch multiple pictures

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+CSS+JavaScript

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:

The simplest js picture switching effect implementation code
A simple image switching effect implemented with html+css+js
A very simple js code to automatically switch images
js picture automatic switching effect processing code
js mouse click button to switch pictures-pictures automatically switch-click left and right buttons to switch special effects code
Pure js to achieve background image switching effect code
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
Simple js code to switch pictures by clicking arrows
CSS picture switching effect code [without js]
JS switches pictures when the mouse moves over them

<<: Detailed explanation of Tomcat's Server Options

>>: Manually install mysql5.7.10 on Ubuntu