快捷導(dǎo)航

js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換

更新時(shí)間：2022年01月25日 10:48:38 作者：丁七歲

這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="ch">
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片的循環(huán)切換</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");
? ? ? ? ? ? ? ? //創(chuàng)建一個(gè)數(shù)組存儲(chǔ)照片的路徑
? ? ? ? ? ? ? ? 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 + "張照片，現(xiàn)在是第" + (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 + "張照片，現(xiàn)在是第" + (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 + "張照片，現(xiàn)在是第" + (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>

效果：