JS implements carousel map click switch, button switch function

Here I directly give a div to put the pictures that need to be rotated, and give two buttons; it is relatively simple, you can refer to the study

Renderings:

The code is as follows (example):

html code:

<div>
        <p id="pa"></p>
        <img src="1.jpg" alt="">
        <button id="lt">&lt;</button>
        <button id="gt">&gt;</button>

    </div>

css code:

 <style>
        div {
            width: 500px;
            background-color: yellowgreen;
            text-align: center;
        }

        div img {
            width: 100%;
            height: 100%;
        }
    </style>

js code:

 <script>
        let lt = document.getElementById('lt');//这里获取按钮button
        let gt = document.getElementById('gt');//这里获取按钮button
        let img = document.querySelector('img');//这里获取图片img
        let imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg",];//这里把我们需要轮播的图片用数组装到一起
        let index = 0;//声明一个变量在图片进行轮播时改变第几张
        let pa = document.getElementById('pa');//这里获取p标签在图片进行轮播时需要切换相应的内容
        pa.innerHTML = '共有' + imgArr.length + '张图片,这是第' + (index + 1) + ' 张';       
     //这里利用innerHTML来实现拼串让文本内容跟随图片改变增加用户体验
        lt.addEventListener('click', function () {//给按钮lt添加点击事件
            index--;//自减是在点击lt按钮时向左切换上一张图片
            if (index < 0) {//判断如果index<0
                index = imgArr.length - 1;//index就等于数组最后一个索引号,实现循环
            }
            img.src = imgArr[index];//这里就把数组内相应的索引赋值给img

//这里把上面声明的变量直接引过来实用点击切换图片时文本内容跟随图片改变,主要是实现图片到第几张告诉用户此时在全部图片的第几张imgArr.length也就是共有几张图片 (index + 1):是代表第几张图片加1是因为数组索引是从0开始所以需要加1;
          pa.innerHTML = '共有' + imgArr.length + '张图片,这是第' + (index + 1) +'张';
        });
        gt.addEventListener('click', function () {
            index++;//自加是在点击gt按钮时向右切换下一张图片
            if (index > imgArr.length - 1) {//判断如果index>imgArr.length - 1
                index = 0;//这里就相当于索引为0,实现循环效果
            }

            img.src = imgArr[index];//这里就把数组内相应的索引赋值给img

//这里把上面声明的变量直接引过来实用点击切换图片时文本内容跟随图片改变,主要是实现图片到第几张告诉用户此时在全部图片的第几张imgArr.length也就是共有几张图片 (index + 1):是代表第几张图片加1是因为数组索引是从0开始所以需要加1;
         pa.innerHTML = '共有' + imgArr.length + '张图片,这是第' + (index + 1) + '张';
        })
    </script>

All the implemented logic is in the js comment, you can study it carefully, if you have any questions, you can leave a message to point out,

JS implements carousel map click switch, button switch function

Guess you like