JavaScript to switch multiple pictures

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

Recommend

Install MySQL in Ubuntu 18.04 (Graphical Tutorial)

Tip: The following operations are all performed u...

Practice of using SuperMap in Vue

Table of contents Preface Related Materials Vue p...

The current better way to make select list all options when selected/focused

During development, I encountered such a requireme...

A brief discussion on the role and working principle of key in Vue3

What is the function of this key attribute? Let’s...

HTML Frameset Example Code

This article introduces a framework made by Frame...

A brief discussion on the mysql execution process and sequence

Table of contents 1:mysql execution process 1.1: ...

Detailed explanation of the workbench example in mysql

MySQL Workbench - Modeling and design tool 1. Mod...

Nginx tp3.2.3 404 problem solution

Recently I changed Apache to nginx. When I moved ...

Example of creating table statements for user Scott in MySQL version of Oracle

Overview: Oracle scott user has four tables, whic...

Basic usage examples of listeners in Vue

Table of contents Preface 1. Basic usage of liste...

Write a dynamic clock on a web page in HTML

Use HTML to write a dynamic web clock. The code i...

Vue implements simple slider verification

This article example shares the implementation of...

Process parsing of reserved word instructions in Dockerfile

Table of contents 1. What is Dockerfile? 2. Analy...

Object.entries usage you don't know in JavaScript

Table of contents Preface 1. Use for...of to iter...