How JS achieves the carousel effect

May 29, 2021 Article blog

When we look at the web, we find that one feature that is often involved is the picture rotation feature. S o how does JS achieve carousel mapping? This article tells you.

Let's first look at what the carousel map looks like. For example, the application of carousel charts can be seen on the W3Cschool website.

How JS achieves the carousel effect1

Here's the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>w3cschool-编程狮</title>
<!-- css样式 -->
    <style type="text/css">
        /*清除边距*/
        div,ul,li{
            margin: 0;
            padding: 0;
        }
        /*首先准备一个放图片的容器*/
        .container{
            width: 500px;
            height: 280px;
            position: relative;
            top: 100px;
            left: 30%;
            /*border: 1px solid #ccc;*/
        }
        /*图片样式*/
        .container img{
            position: absolute;        /*把所有图片放在同一个位置*/
            width: 100%;
            transition-duration: 0.5s;    /*设置过渡时间*/
            opacity: 0;                /*把所有图片变透明*/
        }
        /*图片显示开关*/
        .container img.on{
            opacity: 1;                /*用于显示图片*/
        }
        /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
        .left, .right{
            position: absolute;
            top: 30%;
            width: 60px;
            height: 100px;
            line-height: 100px;
            background-color: #666;
            opacity: 0.5;
            text-align: center;
            font-size: 60px;
            color: #ccc;
            display: none;    /*先隐藏按钮*/
            cursor: pointer;    /*设置鼠标悬停时的样式*/
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .container:hover .left, .container:hover .right{
            display: block;            /*鼠标悬停才容器范围内时显示按钮*/
        }
        .left:hover, .right:hover{
            color: #fff;
        }
        /*焦点*/
        .container ul{
            position: absolute;
            bottom: 0;
            max-width: 500px;
            padding: 5px 200px;
        }
        .container ul li{
            list-style: none;
            float: left;
            background-color: #ccc;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
        }
        .container ul li.active{
            background-color: #282923;        /*焦点激活时的样式*/
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 先把第一张图片显示出来 -->
        <img class="on" src="image/42.png" />
        <img src="image/43.png" />
        <img src="image/44.png" />
        <img src="image/45.png" />
        <!-- 左右切换 -->
        <div class="left"><</div>
        <div class="right">></div>
        <!-- 焦点 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<!-- js部分 -->
    <script type="text/javascript">
        //1、找到container下的所有img标签,li标签,左右按钮
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');
        //点击事件
        //点击按钮图片切换
        var index = 0;        //当前图片下标
        var lastIndex = 0;
        btnRight.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;    //实现周期性变化
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //左边按钮类似
        btnLeft.onclick = function(){
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
    </script>
</body>
</html>

To achieve the effect:

How JS achieves the carousel effect2

Photo footage:

These are all the tutorials for JS to implement the carousel effect. Students can practice hands-on to consolidate this knowledge point.

More JS effects:

How JS achieves the carousel effect

Cookie Consent