Native JavaScript carousel implementation method

This article shares the implementation method of JavaScript carousel for your reference. The specific content is as follows

Effect screenshots:

Note: The div container size and image path can be set by yourself, and the browser can adapt after adding img and a tags.

Create an image folder to store pictures

Write HTML text

<body>
//The image path can be changed by yourself <div id="outer">
       <ul id="imglist">
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
       </ul>
       <div id="nav">
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
       </div>
   </div>
</body>

Add CSS styles

<style>
* {
   margin: 0px;
   padding: 0px;
}

/* Outer frame container */
#outer {
   width: 1555px;
   height: 600px;
   background-color: #bfa;
   margin: 100px auto;
   position: relative;
   /* Hide */
   overflow: hidden;

}

/* List of pictures */
#imglist {
   /* Flexbox layout */
   display: flex;
   list-style: none;
   position: relative;
   /* Layout direction */
   /* flex-direct5on: row; */
   /*Move an image pixel by 1552px*/
   /* right: 1552px; */


}

#imglist li {
   margin: 10px 10px;
}

/* Navigation point */
#nav {
   display: flex;
   list-style: none;
   position: absolute;
   bottom: 50px;
   /* 1555/2 - 6*(20+25)/2 */
   /* left: 642px; */

}

#nav a {
   width: 25px;
   height: 25px;
   margin: 0px 10px;
   background-color: rgb(223, 129, 52);
   border-radius: 5px;
}

/* Mouse movement effect*/
#nav a:hover {
   background-color: rgb(215, 107, 224);
}
</style>

Implementing functionality with JavaScript

<script type="text/javascript">
    window.onload = function () {

    // Get the outer frame properties var outer = document.getElementById("outer");
    // Get imglist attributes var imglist = document.getElementById("imglist");
    // Get img attributes var imgArr = document.getElementsByTagName("img");

    // Get the a attribute var allA = document.getElementsByTagName('a');
    //Get the navigation point var nav = document.getElementById("nav");
    //Set the navigation point to the center nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

    //Default display index var index = 0;
    allA[index].style.backgroundColor = "rgb(215, 107, 224)";
    // Switch navigation point timer var timer = setInterval(function () {
        //Loop display index = (++index) % allA.length;
        //Set the background color of the navigation point allA[index].style.backgroundColor = "rgb(215, 107, 224)";
        SetA();
        //Automatically switch pictures//Modify pictures, one picture moves 1552px to the left
        imglist.style.transition = "right 1.5s"
        imglist.style.right = (index * 1552) + "px";
       

    }, 1800);

    //Click the hyperlink to display the image for (var i = 0; i < allA.length; i++) {
        //Add index to each hyperlink allA[i].index = i;
        //Bind click response function for each hyperlink allA[i].onclick = function () {

            imgIndex = this.index;
            //Override the current position of the navigation point index = imgIndex;
            SetA();
            //Modify the image, move the pixels of an image to the left by 1552px
            imglist.style.transition = "right .85s"
            imglist.style.right = (imgIndex * 1552) + "px";


            //Modify the selected a tag allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
        };
    }
    //Clear the style of a function SetA() {
        for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor = "";
        }
        //Set allA[index].style.backgroundColor = "rgb(215, 107, 224)" for the current navigation;
    }
};

</script>

Complete code

<!DOCTYPE html>
<html lang="en">

<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>Carousel Image</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* Outer frame container */
        #outer {
            width: 1555px;
            height: 600px;
            background-color: #bfa;
            margin: 100px auto;
            position: relative;
            /* Hide */
            overflow: hidden;

        }

        /* List of pictures */
        #imglist {
            /* Flexbox layout */
            display: flex;
            list-style: none;
            position: relative;
            /* Layout direction */
            /* flex-direct5on: row; */
            /*Move an image pixel by 1552px*/
            /* right: 1552px; */


        }

        #imglist li {
            margin: 10px 10px;
        }

        /* Navigation point */
        #nav {
            display: flex;
            list-style: none;
            position: absolute;
            bottom: 50px;
            /* 1555/2 - 6*(20+25)/2 */
            /* left: 642px; */

        }

        #nav a {
            width: 25px;
            height: 25px;
            margin: 0px 10px;
            background-color: rgb(223, 129, 52);
            border-radius: 5px;
        }

        /* Mouse movement effect*/
        #nav a:hover {
            background-color: rgb(215, 107, 224);
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            // Get the outer frame properties var outer = document.getElementById("outer");
            // Get imglist attributes var imglist = document.getElementById("imglist");
            // Get img attributes var imgArr = document.getElementsByTagName("img");

            // Get the a attribute var allA = document.getElementsByTagName('a');
            //Get the navigation point var nav = document.getElementById("nav");
            //Set the navigation point to the center nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

            //Default display index var index = 0;
            allA[index].style.backgroundColor = "rgb(215, 107, 224)";
            // Switch navigation point timer var timer = setInterval(function () {
                index = (++index) % allA.length;
                //Set the background color of the navigation point allA[index].style.backgroundColor = "rgb(215, 107, 224)";
                SetA();
                //Automatically switch pictures//Modify pictures, one picture moves 1552px to the left
                imglist.style.transition = "right 1.5s"
                imglist.style.right = (index * 1552) + "px";

                //Loop display}, 1800);


            //Click the hyperlink to display the image for (var i = 0; i < allA.length; i++) {

                //Add index to each hyperlink allA[i].index = i;
                //Bind click response function for each hyperlink allA[i].onclick = function () {

                    imgIndex = this.index;
                    //Override the current position of the navigation point index = imgIndex;
                    SetA();
                    //Modify the image, move the pixels of an image to the left by 1552px
                    imglist.style.transition = "right .85s"
                    imglist.style.right = (imgIndex * 1552) + "px";


                    //Modify the selected a tag allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";

                };

            }
            //Clear the style of a function SetA() {
                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }

                allA[index].style.backgroundColor = "rgb(215, 107, 224)";


            }


        };


    </script>
</head>

<body>

    <div id="outer">
        <ul id="imglist">
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
        </ul>
        <div id="nav">
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
        </div>
    </div>
</body>
</html>

Function usage:

Create a timer:

setInterval(function () {},30)

Set the rounded border:

border-radius: 5px;

offsetWidth horizontal width + left and right padding + left and right border
offsetHeight vertical height + top and bottom padding + top and bottom border
clientWidth horizontal width + left and right padding
clientHeight vertical height + top and bottom padding

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js to implement the complete code of the carousel
Sample code for implementing carousel with native js
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
JS carousel diagram implementation simple code
js to achieve click left and right buttons to play pictures
JS realizes automatic carousel effect (adaptive screen width + mobile phone touch screen sliding)
Use html+js+css to achieve page carousel effect (example explanation)
JS implements left and right seamless carousel code
Native js to achieve infinite loop carousel effect
js realizes the sliding carousel effect from left to right

<<: HTTPS Principles Explained

>>: In-depth analysis of MySQL indexes