JS implementiert Karussellkarten-Klickschalter und Tastenschalterfunktion

Hier gebe ich direkt ein Div an, um die Bilder zu platzieren, die gedreht werden müssen, und gebe zwei Schaltflächen an; es ist relativ einfach, Sie können sich auf die Studie beziehen

Renderings:

Der Code lautet wie folgt (Beispiel):

HTML Quelltext:

<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>

Die gesamte implementierte Logik befindet sich im js-Kommentar. Sie können ihn sorgfältig studieren. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen, um darauf hinzuweisen.

JS implementiert Karussellkarten-Klickschalter und Tastenschalterfunktion

Supongo que te gusta