Native JS implementation of rotation map

Native JS implementation of rotation map

Because I always feel that things to be completed with the help of plug-ins always feel dependent on others. If I can't rely on them one day, I can't stand up anymore. So I don't want to do it with jQureey. I also saw JS given by many experienced bosses. Generally speaking, it can be realized, but if I completely copy it, there is no excessive effect. I simply added the transition effect and remade the structure, Similar to the fade in and fade out effect of Xiaomi, I made a rotation picture

Overall thinking

  • Wrap all the pictures in a large box and stack them together for absolute positioning. Then each picture is directly hidden with opacity:0. The timer controls to change one picture every 2 seconds. opacity:1. We put this attribute into the. block class. The timer will give the next picture to the. block class every 2 seconds. Then, because the rotation is no longer required when the mouse passes, stop the timer, Restart the router when the mouse leaves
  • A left button and a right button are required in the picture to control the left and right scrolling of the picture. For left and right classes, register click events to control the rotation of the picture,
  • Generally, the rotation chart needs to tell the user how many pictures are in rotation, so you need to put some origin or long bar to let the user know at a glance how many pictures there are. Here is an origin, because it is orderly. Give an ol, and a few pictures will be a few li. Register the mouse passing event, and the mouse passing the first origin will add a. block to the first picture, After the second origin, add a. block to the pictures in Chapter 2. The structure is written in a large box, so you can also stop the timer by clicking the mouse into li

Layout structure

  • The structure is as follows
    <div id="loopDiv">
        <!-- layer  -->
        <ol id='picol'>
            <!-- Top picture -->
            <li class="block"><img src="./images/0.jpg " width='100%'></li>
            <!-- Put the hidden picture below -->
            <li><img src="./images/1.jpg " width='100%'></li>
            <li><img src="./images/2.jpg " width='100%'></li>
            <li><img src="./images/3.jpg " width='100%'></li>
        <!-- The dot in the lower right corner can be used to change the picture directly through the mouse -->
        <ol id="list">
        <!-- Left button in the middle of the picture -->
        <a href="javascript:;" class="blk">
            <div id="left" class="chooseBut">
                < </div>
        <!-- Right button in the middle of the picture -->
        <a href="javascript:;" class="blk">
            <div id="right" class="chooseBut">></div>

CSS Style

  • The style is as follows
        li {
            list-style: none;

        #loopDiv {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            position: relative;

        #list {
            list-style: none;
            position: absolute;
            bottom: 10px;
            right: 25px;

        #list li {
            position: relative;
            float: left;
            width: 8px;
            height: 8px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #cddfec;
            margin-right: 10px;
            border-color: #aaa;
            font-size: 0;

        .chooseBut {
            width: 50px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;

        #left {
            position: absolute;
            left: 0px;
            top: 150px;

        #right {
            position: absolute;
            right: 0px;
            top: 150px;

        .blk {
            display: block;

        #picol li {
            float: left;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 1s;

        .block {
            /* Not enough weight, big dad */
            opacity: 1 !important;

JS execution

  • The code is as follows
    <script type="text/javascript">
        // Big box
        var jsDivBox = document.getElementById("loopDiv");
        //Get picture
        var jsImg = document.getElementById("picol");
        var pic = picol.querySelectorAll('li');
        //Left and right button nodes
        var jsLeft = document.getElementById("left");
        var jsRight = document.getElementById("right");
        //Get all li
        var jsOl = document.getElementById("list");
        var jsLis = jsOl.getElementsByTagName("li");
        //Make the first dot gray
        jsLis[0].style.backgroundColor = "#c2c2c2";
        // Declaration picture subscript
        var currentPage = 0;
        //Start timer
        var timer = setInterval(func, 2000);
        function func() {
        function changePic() {
            // loop
            if (currentPage == 4) {
                currentPage = 0;
            if (currentPage == -1) {
                currentPage = 3;
            //Replace picture
            document.querySelector('.block').className = '';
            pic[currentPage].className = 'block';
            //Clear all dot colors
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            //Change the corresponding small circle point to gray
            jsLis[currentPage].style.backgroundColor = "#8f8f8f";
        //Mouse entry
        jsDivBox.addEventListener("mouseover", func1, false);
        function func1() {
            //Stop Timer 
            //Show left and right buttons
   = "block";
   = "block";
        //Mouse out
        jsDivBox.addEventListener("mouseout", func2, false);
        function func2() {
            //restart timer 
            timer = setInterval(func, 2000);
            //Hide left and right buttons
   = "none";
   = "none";
        //Click the left and right buttons
        jsLeft.addEventListener("click", func3, false);
        jsRight.addEventListener("click", func, false);
        function func3() {
        // Change color when mouse passes over button
        jsLeft.onmouseover = function () {
   = "rgba(0,0,0,0.6)";
        jsLeft.onmouseout = function () {
   = "rgba(0,0,0,0.2)";
        jsRight.onmouseover = function () {
   = "rgba(0,0,0,0.6)";
        jsRight.onmouseout = function () {
   = "rgba(0,0,0,0.2)";
        //Enter the dot
        for (var j = 0; j < jsLis.length; j++) {
            jsLis[j].onmouseover = function () {
                currentPage = parseInt(this.innerHTML) - 1;


  • If the picture is too large and cannot float to a row, it seems that it can give the box a width of more than 100%, but it feels good to fade in and out, so there is no other effect

Posted by Stray_Bullet on Sat, 04 Dec 2021 17:43:05 -0800