当前位置：网站首页>Continue from the previous issue: the remaining two methods of the rotation chart

Continue from the previous issue: the remaining two methods of the rotation chart

2022-07-19 05:12:00 【Create splendid -- hand in hand with you】

The first method of rotation chart ：

Simple rotation chart （HTML page ）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>turnPhoto1</title>
    <link rel="stylesheet" href="css/turnPhoto1.css">
</head>
<body id="body">

</body>
<script src="js/turnPhoto1.js"></script>

</html>

Called as a whole js The content part ：

let Maximum = 8;//photoDiv Maximum number of , Can be changed flexibly 

function generateElement()// to body add to div
{

    let body = window.document.getElementById("body");
    let photoDiv;
    for (let i = 0; i < Maximum; i++) {
        photoDiv = window.document.createElement("div");
        // ---------------------------------------------------- Both codes are set class Property value 
        photoDiv.setAttribute("class", "photo");
        // photoDiv.className = "photo";
        // ---------------------------------------------------- Both codes are set id Property value 
        photoDiv.setAttribute("id", i+1+"");
        // photoDiv.id=i+1+"";
        // ----------------------------------------------------
        photoDiv.style.backgroundImage = "url('image/" + (i + 1) + ".jpg')"
        body.appendChild(photoDiv);
    }
    //  Put a layer of tulle on the top layer 
    let veilDiv=window.document.createElement("div");
    veilDiv.setAttribute("class","veil");
    // veilDiv.className="veil";
    body.append(veilDiv);
}

let index = 0;
let photos = window.document.getElementsByClassName("photo");// The rotation chart is manipulated by an array 
function turn()// Shuffling figure 
{
    if (index==photos.length)// After the subscript reaches the length of the array 
    {
        index = 0;// Zero immediately 
    }
    for (let i = 0; i < photos.length; i++) // be-all photoDiv invisible ,for The loop can be changed , But it may not work after the change 
    {
        photos[i].style.display = "none";
    }
    photos[index].style.display = "block";// Give Way index The point is photoDiv so 
    index++;
}

generateElement();
setInterval(turn, 2000);// Call the rotation graph function every two seconds

css Style part ：

body
{
margin: 0;
padding: 0;
background-color: #FDE6E0;
}

.photo
{
width: 100%;
height: 100%;
/*background-image: url("image/1.jpg");*/
background-size:cover;
background-repeat: no-repeat;
position: absolute;
}
.veil
{
width: 100%;
height: 100%;
background-color: #E9EBFE;
opacity:0.3;
position: absolute;
}

The second method of rotation chart ：

HTML Page content section ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>turnPhoto2</title>
<link rel="stylesheet" href="css/turnPhoto2.css">
</head>
<body>
<img src="image/8.jpg" id="photo">
<script src="js/turnPhoto2.js"></script>
</body>
</html>

js Call the content section （ Simple type ）：

let Maximum = 8;
let index = 1;
let photo =window.document.getElementById("photo");

function turn() {
if (index > Maximum) {
index = 1;
}
// ---------------------------------------------------------------- Set up img Of src attribute , Choose between two ways
// photo.src = "image/" + index + ".jpg";
photo.setAttribute("src","image/"+index+".jpg");
// ----------------------------------------------------------------
index++;
}

setInterval(turn, 2000);