Example code for implementing stacked carousel effect with HTML+CSS+JS

Example code for implementing stacked carousel effect with HTML+CSS+JS

Effect:
When the slideshow moves in one direction, the size, position, transparency and level of each image should be changed.
principle:
When the carousel moves to the left, the first child element is cut to the end. When the carousel moves to the right, the last child element is cut to the front, so as to achieve a seamless carousel effect. Because the next li will be filled in after the li is cut (for example, when the first child element is cut to the end, the second child element will be filled in as the first child element), the li subscript remains unchanged. In this way, the properties of the li at each position (size, position, transparency, level) are modified.
HTML code:

 <body>
    <div class="smallBox">
    <div class="arrowLeft">←</div>
    <div class="smallPicBox"> //Use a div to store a ul, and set the initial style for each li in the ul<ul>
                <li id="li1" style="position: absolute;top:calc(50% - 200px);left: 0px;z-index:1;background-color: aqua;transform: scale(0.5);transition: 0.3s;opacity: 0.5;background-image: url(./images/01.jpg);background-size: cover;"></li>
                <li id="li2" style="position: absolute;top:calc(50% - 200px);left: 150px; z-index:2;background-color: red;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/02.jpg);background-size: cover;"></li>
                <li id="li3" style="position: absolute;top:calc(50% - 200px);left: 300px; z-index:3;background-color: blue;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/03.jpg);background-size: cover;"></li>
                <li id="li4" style="position: absolute;top:calc(50% - 200px);left: 450px; z-index:4;background-color: green;transform: scale(1); transition: 0.3s;opacity: 1;background-image: url(./images/04.jpg);background-size: cover;"></li>
                <li id="li5" style="position: absolute;top:calc(50% - 200px);left: 600px; z-index:3;background-color: yellow;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/05.jpg);background-size: cover;"></li>
                <li id="li6" style="position: absolute;top:calc(50% - 200px);left: 750px; z-index:2;background-color: gray;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/06.jpg);background-size: cover;"></li>
                <li id="li7" style="position: absolute;top:calc(50% - 200px);left: 900px; z-index:1;background-color: deeppink;transform: scale(0.5); transition: 0.3s;opacity: 0.5;background-image: url(./images/07.jpg);background-size: cover;"></li>
            </ul>
        </div>
        <div class="arrowRight">→</div>
    </div>
</div>
</body>

CSS code:

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .albumBox{
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .smallBox{
            height: 400px;
            line-height: 400px;
            position: relative;
        }
        .smallPicBox{
            width: 1100px;
            height: 400px;
            float: left;
            position: relative;
        }
        .smallPicBox ul{
            width: 100%;
            height: 400px;
        }
        .smallPicBox li{
            width: 320px;
            height: 400px;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .smallBox .current::after{
            content: "\25b2";
            position: absolute;
            top: -31px;
            left: 70px;
            color: red;

        }
        .arrowLeft{
            width: 50px;
            height: 400px;
            position: absolute;
            left: 0;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: gray;
            z-index: 10;
        }
        .arrowRight{
            width: 50px;
            height: 400px;
            position: absolute;
            right: 0;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: gray;
            z-index: 10;
        }
    </style>

JS code:

<script>
        var arrowLeft = document.querySelector(".arrowLeft")
        var arrowRight = document.querySelector(".arrowRight")
        var ul = document.querySelector(".smallPicBox ul")
        var li = document.querySelectorAll(".smallPicBox li")
        var timerId = 0
        arrowLeft.onclick=function(){ //Left arrow click event li=document.getElementsByTagName('li')
                ul.appendChild(li[0]) //Cut the 0th child element of ul to the end to achieve seamless carousel posi(li) //Modify the properties of each li}
        arrowRight.onclick=function(){ //right arrow click event li=document.getElementsByTagName('li') //get li again
                ul.insertBefore(li[6],li[0]) //Cut the last child element of ul to the front to achieve seamless carousel posi(li) //Modify the properties of each li}
        
        function posi(li){ //Modify li attribute function var n1=0
                for(var x=0;x<li.length;x++){ //Modify position li[x].style.left=n1+'px'
                    n1=n1+150
                }
                for(var i=0;i<li.length/2;i++){ //Modify the level li[i].style.zIndex=i+1
                    li[li.length-1-i].style.zIndex=i+1
                }
                li[3].style.zIndex='4'
                var n2=0.3
                for(var j=0;j<li.length/2;j++){ //Scaling n2=parseFloat(n2+0.2)
                    li[j].style.transform='scale('+n2+')'
                    li[li.length-1-j].style.transform='scale('+n2+')'
                }
                li[3].style.transform = 'scale(1)'
                var n3=0.3
                for(var k=0;k<li.length/2;k++){ //Modify transparency n3=parseFloat(n3+0.2)
                    li[k].style.opacity=n3
                    li[li.length-1-k].style.opacity=n3
                }
                li[3].style.opacity='1'
        }
        //Mouse in and out temerId=setInterval(function(){
             arrowLeft.click()
        }, 1000);
        arrowLeft.onmouseover=function(){
            clearInterval(timerId)
        }
        arrowLeft.onmouseout=function(){
           timerId = setInterval(function(){
            arrowLeft.click()
         }, 1000);
        }
        arrowRight.onmouseover=function(){
            clearInterval(timerId)
        }
        arrowRight.onmouseout=function(){
           timerId = setInterval(function(){
            arrowLeft.click()
         }, 1000);
        }
    </script>

Note: In this example, js is written directly in the body. You can also write a separate js file and introduce it into the html interface

Effect picture:

insert image description here

This concludes this article about sample code for implementing stacked carousel effects with HTML+CSS+JS. For more information on implementing carousel with HTML+CSS+JS, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker

>>:  Classes in TypeScript

Recommend

Steps to build a file server using Apache under Linux

1. About the file server In a project, if you wan...

A brief discussion on two current limiting methods in Nginx

The load is generally estimated during system des...

Vue implements graphic verification code login

This article example shares the specific code of ...

jenkins+gitlab+nginx deployment of front-end application

Table of contents Related dependency installation...

How to implement a single file component in JS

Table of contents Overview Single file components...

Demystifying the HTML 5 Working Draft

The World Wide Web Consortium (W3C) has released a...

A possible bug when MySQL executes the sum function on the window function

When using MySql's window function to collect...

Ubuntu View and modify mysql login name and password, install phpmyadmin

After installing MySQL, enter mysql -u root -p in...

Example of how to implement keepalived+nginx high availability

1. Introduction to keepalived Keepalived was orig...

Complete steps for using Echarts and sub-packaging in WeChat Mini Program

Preface Although the holiday is over, it shows up...

JavaScript knowledge: Constructors are also functions

Table of contents 1. Definition and call of const...

MySQL paging query optimization techniques

In applications with paging queries, queries that...

Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords

http://www.cppcns.com/shujuku/mysql/283231.html Y...

A very detailed explanation of the Linux DHCP service

Table of contents 1. DHCP Service (Dynamic Host C...

Tips for using top command in Linux

First, let me introduce the meaning of some field...