JS 图片切换

图片的上下页切换

<script type="text/javascript">
            window.onload = function(){
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");
                // alert("上一张");
                // 获取到一个数组 我们可以确定只有一个img标签[0]获取第一个img标签
                var img = document.getElementsByTagName("img")[0];
                var imgArray = ["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg"];
                // 创建一个变量,来保存当前正在显示的图片的索引
                var index = 0;
                // 设置提示文字
                var info = document.getElementById("info");
                info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
                prev.onclick = function(){
                 /* 
                    切换到上一张,索引自减
                */
                    index--;
                    if(index < 0){
                        index = imgArray.length - 1;
                    }
                    img.src = imgArray[index];
                    info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
                };
                next.onclick = function(){
                    // alert("下一张");
                    /* 
                        切换到下一张,索引自增
                    */
                    index++;
                    if(index > imgArray.length - 1){
                        index = 0;
                    }
                    img.src = imgArray[index];
                    info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
                };
            }
        </script>

标签：index,img,image,jpg,JS,切换,var,imgArray,图片
来源： https://blog.csdn.net/weixin_48247966/article/details/119426963