JS实现轮播图点击切换、按钮切换功能

这里我直接给的一个div把需要轮播的图片放进去,给了两个button;比较简易,可以参考学习

效果图:

代码如下（示例）：

html代码:

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

    </div>

css代码:

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

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

js代码:

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

所有实现的逻辑都在js注释内,可以仔细研究一下,有问题可以留言指出,

JS实现轮播图点击切换、按钮切换功能

猜你喜欢