JavaScript：图片轮流展示

关注

原创 2023-02-03 19:33:54 1k 阅读 AI 写同款· GEO 优化 ›

JavaScript 字节流转图片显示需要在前端接受后端传过来的字节流然后显示 // 字节流转图片 export function formatByte2Img(data) { let blobUrl = '' const bytes = new Uint8Array(data) const blob = new Blob([bytes], { type: 'image/png' }) blobUrl = (window.URL || window.webkitURL).createObjectURL(blob) return blo 阅读详情

本文记录了使用JavaScript实现图片轮流展示的方法。分为代码部分（html、JavaScript、css）和效果展示部分。

HTML包括一个图片展示区域和两个按钮，两个按钮分别表示上一张图片和下一张。img没有在html预先指定src值，功能在js里面实现，这样修改的时候可以只修改js。

<div id="imageDiv">
    <button id="previous">&lt;</button>
    <img />
    <button id="next">&gt;</button> 
</div>

JavaScript部分，这里首先从dom里取一些值方便使用，再指定自增变量i、图片列表imgList、图片数NUM、图片路径PATH。之后执行语句将img初始化，展示第一张图片。接下来的两个函数分别绑定两个按钮的onclick属性，实现点击按钮切换图片。

    <script>
        var prev = document.getElementById('previous');
        var next = document.getElementById('next');
        var imgTag = document.getElementsByTagName('img')[0];
        var i = 0;
        const imgList = ['slash.png','dodge.png','peach.png'];
        const NUM = imgList.length;
        const PATH = 'resource/';

        imgTag.src = PATH + imgList[0];

        prev.onclick = function(){
            --i;
            while(i<0)i+=NUM;
            imgTag.src= PATH + imgList[i%NUM];
        }
        next.onclick = function(){
            ++i;
            imgTag.src = PATH + imgList[i%NUM];
        }
    </script>

以上内容就可以基本实现功能了，为了使页面至少还算能看，再给它写一点css吧

*{
            margin: 0;
            padding: 0;
        }
        #imageDiv{
            margin: 100px;
            padding: 20px;
            background-color: aliceblue;
            text-align: center;
        }
        button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border-color: aliceblue;
            margin: 20px;
            background-color: white;
            color: gray;
            font-size: larger;
            position: relative;
            top: -150px;
        }
        img{
            height: 300px;
        }

效果：