标签：index img image jpg JS 切换 var imgArray 图片

图片的上下页切换

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。