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

Solution to forgetting the MYSQL database password under MAC

Quick solution for forgetting MYSQL database pass...

Solution to ElementUI's this.$notify.close() call not working

Table of contents Requirement Description Problem...

Let's talk in detail about the difference between unknown and any in TypeScript

Table of contents Preface 1. unknown vs any 2. Th...

Summary of common commands in Dockerfile

Syntax composition: 1 Annotation information 2 Co...

Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0

1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...

Detailed steps to build an NFS file sharing server in Linux

Linux builds NFS server In order to achieve data ...

Introduction to HTML method of opening link files using hyperlinks

a and href attributes HTML uses <a> to repr...

Vue login function implementation

Table of contents Written in front Login Overview...

The linkage method between menu and tab of vue+iview

Vue+iview menu and tab linkage I am currently dev...

Overview and differences between html inline elements and html block-level elements

Block-level element features : •Always occupies a ...

Analysis of the event loop mechanism of js

Preface As we all know, JavaScript is single-thre...

Steps to split and compress CSS with webpack and import it with link

Let's take a look at the code file structure ...

Do you know the difference between empty value and null value in mysql

Preface Recently I found that my friend's met...

Detailed explanation of Javascript basics

Table of contents variable Data Types Extension P...