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

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

Recommend

MySQL DML statement summary

DML operations refer to operations on table recor...

Detailed explanation of the Docker container lifecycle architecture and the differences between it and VM

Container lifecycle The life cycle of a container...

How to use Linux paste command

01. Command Overview The paste command will merge...

MySql Group By implements grouping of multiple fields

In daily development tasks, we often use MYSQL...

Summary of common Nginx techniques and examples

1. Priority of multiple servers For example, if e...

How to change mysql password under Centos

1. Modify MySQL login settings: # vim /etc/my.cnf...

Win10 configuration tomcat environment variables tutorial diagram

Before configuration, we need to do the following...

How to configure common software on Linux

When you get a new Linux server, you generally ha...

How to monitor the running status of docker container shell script

Scenario The company project is deployed in Docke...

An article explains Tomcat's class loading mechanism

Table of contents - Preface - - JVM Class Loader ...

How to implement HTML to detect that input is complete and automatically fill in the next content

In the previous article, we have realized the sim...

MySQL initialization password operation under Mac

A simple record of the database startup problems ...

Summary of MySQL database usage specifications

Introduction: Regarding MySQL database specificat...

WeChat Mini Program Basic Tutorial: Use of Echart

Preface Let’s take a look at the final effect fir...

Detailed explanation of Vue advanced construction properties

Table of contents 1. Directive custom directive 2...