怎么用js点击按钮实现多张图片循环切换

2023-06-28 23:06:26 164人浏览薄情痞子

摘要

本篇内容介绍了“怎么用js点击按钮实现多张图片循环切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！具体内容如下代码：<!DOCTYP

本篇内容介绍了“怎么用js点击按钮实现多张图片循环切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

具体内容如下

代码：

<!DOCTYPE html><html lang="ch">    <head>        <meta charset="UTF-8">        <title>点击按钮实现多张图片的循环切换</title>        <style type="text/CSS">            * {                margin: 0;                padding: 0;            }            .img-wrapper {                width: 520px;                height: 520px;                background-size: contain;                overflow: hidden;                margin: 50px auto;                background-color: green;            }            .img-wrapper img{                width: 533px;                height: 300px;            }            .img-wrapper p {                text-align: center;                height: 20px;                line-height: 20px;                font-size: 16px;                margin-bottom: 10px;                margin-top: 8px;            }            .img-wrapper button {                margin: 12px 93px;                font-size: 18px;            }        </style>        <script type="text/javascript">            window.onload = function () {                let prev = document.getElementById("prev");                let next = document.getElementById("next");                let img = document.getElementsByTagName("img")[0];                let info = document.getElementById("info");                //创建一个数组存储照片的路径                let imgArr = ["img/111.jpg", "img/222.jpg", "img/333.jpg", "img/444.jpg", "img/555.jpg", "img/666.jpg"];                let index = 0;                info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";                prev.onclick = function () {                    index--;                    prev.style.backgroundColor="#ff4c31";                    if (index < 0) {                        index = imgArr.length - 1;                    }                    img.src = imgArr[index];                    info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";                };                next.onclick = function () {                    index++;                    next.style.backgroundColor="#ff4c31";                    if (index > imgArr.length - 1) {                        index = 0;                    }                    img.src = imgArr[index];                    info.innerText = "一共有" + imgArr.length + "张照片，现在是第" + (index + 1) + "张";                };            };        </script>    </head>    <body>        <div class="img-wrapper">            <p id="info"></p>            <img src="img/111.jpg">            <button id="prev">上一张</button>            <button id="next">下一张</button>        </div>    </body></html>

效果：

怎么用js点击按钮实现多张图片循环切换