I use js+css+html to realize a dynamic rotation chart. I intend to write a blog to record it. I will put it below: video effect of works + explanation of ideas + explanation of knowledge points + how to obtain it
Video effects of works:
js+html+css to realize dynamic rotation diagram - Google Chrome 2021-10-22 20-02-35
Explanation of ideas:
First, the html+js part. I'll put the code directly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic rotation chart</title>
<link rel="stylesheet" href="../css.css/reset.css">
<link rel="stylesheet" href="../css.css/style.css">
<script>
// The style of the page has probably been set. How to realize the function of moving back and forth
// My idea is to delete and insert the first li constantly, so as to change the order
window.onload=function(){
// First, try whether you can bundle events for two div s
// Get div object
// The function of two buttons has been realized to see if the function of automatic rotation can be realized
// After watching other people's video screens, set a function directly, and then rotate regularly
let timmer=setInterval(zd,3000);
function zd(){
let fristli=document.querySelectorAll(".container .lb li")[0];
// Get all li's parent nodes to facilitate deletion and insertion
let father=document.querySelector(".container .lb");
// Delete the first li
let temp =father.removeChild(fristli);
// Then insert temp at the end of the li list
father.appendChild(temp);
}
// Set the button to press down first
let next=document.querySelector(".container .next a");
next.onclick=function(){
// alert("next page"); Valid after test
//Get the first li
let fristli=document.querySelectorAll(".container .lb li")[0];
// Get all li's parent nodes to facilitate deletion and insertion
let father=document.querySelector(".container .lb");
// Delete the first li
let temp =father.removeChild(fristli);
// Then insert temp at the end of the li list
father.appendChild(temp);
}
// Similarly, the idea of moving forward is the opposite of the above. Delete the last one and then
// Set the forward button first
let pre=document.querySelector(".container .pre a");
pre.onclick=function(){
// alert("previous page"); Valid after test
//Get the last li
let lastli=document.querySelectorAll(".container .lb li")[4];
// Get all li's parent nodes to facilitate deletion and insertion
let father=document.querySelector(".container .lb");
// Delete the last li
let temp =father.removeChild(lastli);
// Then insert temp to the front of the li list
father.insertBefore(temp,father.firstChild);
}
}
</script>
</head>
<body>
<!-- Recently learned js of dom Relevant knowledge, I plan to make a dynamic rotation chart to consolidate my knowledge -->
<!-- My idea is: use it first html and css Make the corresponding static interface and then use it js Realize dynamic function -->
<div class="container">
<!-- Main part of the rotation chart -->
<ul class="lb">
<li><img src="./1.jpeg" alt="picture"></li>
<li><img src="./2.jpeg" alt="picture"></li>
<li><img src="./3.jpeg" alt="picture"></li>
<li><img src="./4.jpeg" alt="picture"></li>
<li><img src="./5.jpeg" alt="picture"></li>
</ul>
<!-- Plus move left button -->
<div class="pre">
<a href="#">
<img src="../img/Large left switch arrow.png" alt="picture">
</a>
</div>
<!-- Add the move right button -->
<div class="next">
<a href="#">
<img src="../img/Large right switch arrow.png" alt="">
</a>
</div>
</div>
</body>
</html>
css part:
/* Set the entire page to pink */
body{
background-color: pink;
}
/* First, set the container to center in the page */
.container{
width: 800px;
margin: 200px auto;
position: relative;
}
/* Set the size of all pictures */
.container .lb li img{
width: 400px;
height: 200px;
/* Set fillet */
border-style: solid;
border-width: 3px;
border-color: purple;
border-radius: 15px;
}
.container .lb li{
/* Absolute positioning of all pictures */
position: absolute;
}
/* Adjust the position of each picture */
.container .lb li:nth-child(0){
left: 0px;
}
.container .lb li:nth-child(1){
top: -50px;
left: 150px;
z-index: 100;
}
/* Resize the picture in the middle */
.container .lb li:nth-child(1) img{
width: 500px;
height: 300px;
}
.container .lb li:nth-child(2){
left: 400px;
}
/* Adjust the style of the two buttons */
.container .pre{
position: absolute;
width: 50px;
height: 100px;
top: 50px;
left: -25px;
}
.container .next{
position: absolute;
width: 50px;
height: 100px;
top: 50px;
right: -25px;
}
/* Sets the size of the arrow */
.container .pre a img{
width: 50px;
height: 100px;
}
.container .next a img{
width: 50px;
height: 100px;
}
Ideas:
The idea of how to build this rotation chart: first, I am used to using css and html to realize the static page first, and then using js to realize the dynamic effect. I have seen some videos, and some great gods are completed directly using js, but I am not proficient at present, so I do the static page first. I also recommend you to start with the static interface first;
js: first of all, there are five pictures in the code. I use five Li's, and then locate and display the first three pictures. Two pictures are actually covered. How to realize the rotation: because I fixedly display the first three li's, in order to achieve the rotation effect, I only need to form a cycle in the order of Li's, so there are two ideas, These two ideas are also the functions of which two arrows:
(1) Insert the last one before the first li
(2) Put the first li after the last li
Then combined with a timing function, the rotation effect can be realized
Explanation of knowledge points:
The following will only briefly explain the knowledge points involved. If you want to have an in-depth understanding, please check the information yourself:
html section:
Block box center: fixed width + left and right margin: auto
css part:
Pseudo class selector:: nth child (n)
Here's why we use this child selector instead of directly locking a li. This is to facilitate js to switch the style of li. Here, we only need to change n to apply css style to different
js part:
window. ο nl ο ad=function(): delay the js code until the page is loaded
Timer: let timer = setinterval (ZD, 3000);
Execute a zd code at regular intervals
Method to query elements: querySelector() querySelectorAll()
These two methods can obtain a node according to the string formed by the css selector
Where querySelector() is the first one to get, and querySelectorAll() is to get all matching nodes
Method of manipulating nodes: appendChild() removeChild() insertBefore()
appendChild(): inserts a node at the end of the child node list
removeChild(): removes a node according to parameters
insertBefore(): inserts a node before a child node of the parent node