Sample code of simple seamless rolling carousel map implemented by native JS

Time:2022-1-2

There are many loopholes in the simple seamless rolling rotation chart, that is, it will be very inconvenient to add pictures in the later stage, there are many places that need to be changed, and the coupling is also very strong. It is only applicable to some programs, so we can upgrade the code by changing the picture structure and calculating the conversion point.

Original simple rolling rotation code

<html>
<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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            position: relative;
            width: 830px;/* Display width: display 4 figures + 3 borders = 830*/
            height: 130px;
            border: 10px solid rgb(15, 15, 15);
            margin: 100px auto;
            overflow: hidden;
        }
        .scroll ul{
            position: absolute;
            width: 5000px;/* UL can store all Li's width*/
            height: 130px;
            top: 0;
            left: 0;
        }
        .scroll ul li{
            float: left;
            width: 200px;
            height: 130px;
            margin-right: 10px;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>

            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>
        </ul>
    </div>

    <script>
        //Get element
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.children;
        //Scroll
        var nowLeft = 0;
        //To find the return point of the motion of the UL element
        var back = -1470;// The figure and border are the width of Li. There are four figures displayed, so the turn back point is 1260
        //Timer
        var timer = setInterval(run,20);

        //Move the mouse over and scroll stops
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        //Remove the rotation
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //Motion function
        function run(){
            nowLeft -= 2;
            //Judge whether it has reached the turn back point. If it has reached the turn back point, it will instantly switch to position 0
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

       
    </script>
</body>
</html>

   add a parent div to UL in the < div > structure, so that pictures can be added later. Later, the conversion point can be calculated by obtaining the width of UL
   1. Turn back point calculation needs to be calculated automatically through JS
   var back = -munit. offsetWidth;// The element moves left with a negative value
  2. Automatically generate another group of corresponding picture structures Li
   munit. innerHTML = munit. innerHTML + munit. innerHTML;// In this way, a group of Li tags will be added, and pictures will be added later
Modify some codes,

CSS rewrite section:
  /*Add a parent div to UL, so you can get the width of UL after adding pictures*/
        .scroll .inner{
            position: relative;
            width: 5000px;
        }
        .scroll ul{
            position: absolute;
            height: 130px;
            top: 0;
            left: 0;
            list-style: none;


Body rewrite:      
<body>
    <div>
       <div>
           <ul>
              <li><img src="../BOM/shuzi/3.png" alt=""></li>
              <li><img src="../BOM/shuzi/4.png" alt=""></li>
              <li><img src="../BOM/shuzi/5.png" alt=""></li>
              <li><img src="../BOM/shuzi/6.png" alt=""></li>
              <li><img src="../BOM/shuzi/7.png" alt=""></li>
              <li><img src="../BOM/shuzi/8.png" alt=""></li>
              <li><img src="../BOM/shuzi/9.png" alt=""></li>
              <li><img src="../BOM/shuzi/10.png" alt=""></li>
          </ul>
       </div>
    </div>

JS rewrite:
<script>
        //Get element
        var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //Rewrite part
        //1. The rebate point shall be calculated automatically through JS
        var back = -munit. offsetWidth;// The element moves left with a negative value
        //2 automatically generate another group of corresponding picture structures Li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        //Scroll


        var nowLeft = 0;
        //Timer
        var timer = setInterval(run,20);

        //Move the mouse over and scroll stops
        scroll.onmouseover = function(){
            clearInterval(timer);
        }
        //Remove the rotation
        scroll.onmouseout = function(){
            timer = setInterval(run,20);
        }

        //Motion function
        function run(){
            nowLeft -= 1;
            //Judge whether it has reached the turn back point. If it has reached the turn back point, it will instantly switch to position 0
            if(nowLeft <= back){
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

    </script>
</body>
</html>

This code has low coupling, and is also suitable for the addition of any number of Li and any size of pictures

The above is the detailed content of the sample code of the simple seamless rolling rotation diagram implemented by the native JS. For more information about the simple seamless rolling rotation diagram implemented by JS, please pay attention to other relevant articles of developeppaer!

Recommended Today

Explanation of websocket heartbeat reconnection

Recently, websocket has been used in the development of applet. The applet provides corresponding native API, which is different from H5 API. Therefore, some mature class libraries of popular H5 are difficult to use, and the native API has some defects, so it implements a set of heartbeat reconnection mechanism by itself. First, let’s briefly […]