Implementing carousel effects with JavaScript

This article shares the specific code for JavaScript to achieve the effect of the carousel for your reference. The specific content is as follows

Implementation code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #box {
            margin: 30px auto;
            width: 590px;
            height: 340px;
            position: relative;
        }
 
        #banner-list > li {
            position: absolute;
            left: 0;
            right: 0;
            opacity: 0;
            /*Transition animation*/
            transition: opacity 2s ease;
        }
 
        #left, #right {
            width: 30px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            color: rgba(255,255,255,0.7);
            background-color: rgba(0,0,0,0.3);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            z-index: 3;
        }
 
        #right {
            right: 0;
        }
 
        #tag-list {
            width: 130px;
            position: absolute;
            left: 50%;
            bottom: 8px;
            margin-left: -55px;
        }
 
        #tag-list > li {
            float: left;
            width: 18px;
            height: 18px;
            margin: 4px;
            text-align: center;
            line-height: 18px;
            font-size: 13px;
            background-color: white;
            border-radius: 9px;
            /*Transition animation*/
            transition: background-color 1s ease;
        }
    </style>
    <script>
        window.onload = function (){
            //Get tag_list and circle list
            var tag_list = document.getElementById("tag-list");
            var list = tag_list.children;
 
            //1. Get ul(banner_list) and all li
            let banner_list = document.getElementById("banner-list");
            let bannerLi = banner_list.children;
 
            //2. Display the first banner by default
            bannerLi[0].className = "current-banner"
            bannerLi[0].style.opacity = 1
            list[0].style.backgroundColor = "red"
 
            //3. The index starts from 0 and the first one is displayed by default.
            //count indicates the index of the currently displayed page let count = 0;
 
            //4. Click > to switch to the right var right = document.getElementById("right");
            right.onclick = function (){
                //4.1 Hide the current page first bannerLi[count].className = ""
                bannerLi[count].style.opacity = 0
                list[count].style.backgroundColor = "white"
 
                //4.2. The page number increases by 1, and when it reaches the 6th page (index=5), switch to the first page (index=0)
                if (++count == 5){
                    count = 0
                }
 
                //4.3 Set the current page number to display bannerLi[count].className = "current-banner"
                bannerLi[count].style.opacity = 1
                list[count].style.backgroundColor = "red"
            }
 
            //Similar to right, modify the condition var left = document.getElementById("left");
            left.onclick = function (){
                //4.1 Hide the current page first bannerLi[count].className = ""
                bannerLi[count].style.opacity = 0
                list[count].style.backgroundColor = "white"
 
                //4.2. The page number decreases by 1, when it reaches the 0th page (index=-1), switch to the 5th page (index=4)
                if (--count == -1){
                    count = 4
                }
 
                //4.3 Set the current page number to display bannerLi[count].className = "current-banner"
                bannerLi[count].style.opacity = 1
                list[count].style.backgroundColor = "red"
            }
 
            //Bind mouse events to all circles for (let i = 0; i < list.length; i++) {
                list[i].onmouseenter = function (){
                    //Set the circle style list[count].style.backgroundColor = "white"
                    list[i].style.backgroundColor = "red"
                    //Set the banner image style bannerLi[count].className = ""
                    bannerLi[count].style.opacity = 0
                    bannerLi[i].className = "current-banner"
                    bannerLi[i].style.opacity = 1
                    //Set count to i
                    count = i
                }
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <ul id="banner-list">
            <li class="current-banner"><img src="banner-img/11.jpg" alt=""></li>
            <li><img src="banner-img/22.jpg" alt=""></li>
            <li><img src="banner-img/33.jpg" alt=""></li>
            <li><img src="banner-img/44.jpg" alt=""></li>
            <li><img src="banner-img/55.jpg" alt=""></li>
        </ul>
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
        <div>
            <ul id="tag-list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</body>
</html>

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:

JavaScript to implement simple carousel chart most complete code analysis (ES5)
Using js to achieve the effect of carousel
Native js to achieve simple carousel effect
Using JavaScript to implement carousel effects
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
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)

<<: mysql 8.0.19 winx64.zip installation tutorial

>>: Remote Desktop Connection between Windows and Linux