Sample code for a simple seamless scrolling carousel implemented with native Js

There are many loopholes in the simple seamless scrolling carousel, which is that it is very inconvenient to add pictures later, and many places need to be changed. It is also highly coupled and only applicable to part of the program. Therefore, we can upgrade the code by changing the picture structure and calculating the conversion point.

Original simple scrolling carousel 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: 4 images + 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 the width of all li*/
            height: 130px;
            top: 0;
            left: 0;
        }
        .scroll ul li{
            float: left;
            width: 200px;
            height: 130px;
            margin-right: 10px;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div id="scroll" class="scroll">
        <ul id="munit">
            <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 the element var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.children;
        // Scroll var nowLeft = 0;
        //To find the turning point of the ul element's movement var back = -1470; //The image and border are the width of the li, and there are 4 images displayed, so the turning point is 1260
        //Timer var timer = setInterval(run,20);

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

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

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

Add a parent div to ul in the <div id="scroll"> structure, so that you can add pictures later and calculate the conversion point by getting the width of ul later
1. The rebate point calculation needs to be automatically calculated by Js
var back = -munit.offsetWidth; //The element moves left, the value is negative
2. Automatically generate another set of corresponding image structures li
munit.innerHTML = munit.innerHTML + munit.innerHTML; //This will add a set of li tags, and adding pictures later will also increase and modify some codes.

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


Body rewrite part:      
<body>
    <div id="scroll" class="scroll">
       <div class="inner">
           <ul id="munit">
              <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 rewriting part:
<script>
        //Get the element var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //Rewrite part//1 The return point calculation needs to be automatically calculated by Js var back = -munit.offsetWidth;//The element moves left, the value is negative//2 Automatically generate another set of corresponding image structures li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        // Scroll var nowLeft = 0;
        //Timer var timer = setInterval(run,20);

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

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

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

This kind of code has low coupling and is also suitable for adding any number of li and pictures of any size.

The above is the details of the sample code of the simple seamless scrolling carousel implemented by native Js. For more information about the simple seamless scrolling carousel implemented by Js, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

How to use JavaScript to achieve seamless scrolling and automatic playback of carousel images
JavaScript object-oriented implementation of seamless scrolling carousel example
JavaScript to achieve special-shaped scrolling carousel
JS realizes the upward scrolling carousel effect of the ranking text
js carousel seamless scrolling effect
Perfectly implement js focus carousel effect (Part 2) (scrollable pictures)
JavaScript carousel and custom scroll bar with mouse wheel sharing code post
JS simple carousel picture scrolling example
Sample code for implementing carousel with native js
Detailed explanation of the principle of making JavaScript scrolling carousel

<<: Mysql query the most recent record of the sql statement (optimization)

>>: A brief analysis of the examples and differences of using nohup and screen to run background tasks in Linux