JS code to achieve page switching effect

This article example shares the specific code of JS code to achieve page switching effect for your reference. The specific content is as follows

HTML+CSS Part

Add all pages, and buttons for the previous page, specific page, and next page.
Set the div style. By default, the first page is displayed and other pages are hidden.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  .item {
  display: none;
  width: 300px;
  height: 400px;
  overflow: hidden;
  position: relative;
  }  
  .item>img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  } 
  .item.active {
  display: block;
  }
 </style>
 </head>
 <body>
 <div>
  <button class="prev" >Previous page</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >Next page</button>
 </div>
 <div>
  <div class="item active"><img src="img/1.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/2.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/3.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/4.png" height="1191" width="820" /></div>
 </div>
 </body>
</html>

js part

Use buttons to implement page functions

<script type="text/javascript">
 //Encapsulation function, part of the image display, the div obtained by passing in, and the clicked sequence number function toggle(eles, active) {
  for(var i = eles.length; i--;) {
   eles[i].className = "item"; //Hide all divs first}
  eles[active].className = "item active"; //Then display the div corresponding to the clicked number}
  //Get the button and div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next = document.getElementsByClassName("next");
  var nowPage = 0; //Define the current page, the default value is 0;
    
  for(var i = aBtn.length; i--;) {
   aBtn[i].tab = i;
   aBtn[i].onclick=function(){
   toggle(aIem,this.tab);
   nowPage=this.tab; //After being clicked, save the serial number of the current page}
  }
   //Next page next[0].onclick = function () {  
   nowPage++;   
   nowPage %= aBtn.length;
   toggle(aIem,nowPage);
  }
  //Previous page prev[0].onclick=function(){
  nowPage--;
  if(nowPage == -1){
   nowPage = aBtn.length-1;
  }
 toggle(aIem,nowPage);  
 }
</script>

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:

Page switching style based on JS to achieve flip book effect
Simple implementation of js page switching function
How to implement scalable page switching using AngularJS
JavaScript realizes the pop-up floating layer effect when the mouse hovers over the text
js text exceeds the length and is replaced by an ellipsis. When the mouse is hovered, an example is displayed in a floating box.
javascript The original image is displayed when the mouse hovers over the image, and disappears when the mouse is moved out (multiple images)
Vue.js mouse hover change picture function
The drop-down box effect produced by js when the mouse is suspended
How to display a mask layer when the mouse is hovering in js
JavaScript to achieve mouse hover page switching effect

<<: Implementing a shopping cart with native JavaScript

>>: JavaScript canvas text clock