js 怎样实现图片的切换？

最新推荐文章于 2023-08-07 23:01:08 发布

夹心爱吃果冻

最新推荐文章于 2023-08-07 23:01:08 发布

阅读量250

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43168302/article/details/118655795

版权

要切换图片就是修改img标签的src属性。获取img标签，是一个数组，必须有索引值

<body>
<div id="router">
    <p id="info"></p>
    <img src="../img/img.png"><br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
<script>
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    //要切换图片就是修改img标签的src属性
    //获取img标签，是一个数组
    var imgArr=["../img/img_1.png","../img/img.png","../img/img_2.png","../img/img_3.png"];
    //创建一个对象来保存当前对象的索引
    var index=0;
    var img=document.getElementsByTagName("img")[0]
    var info=document.getElementById("info")
    info.innerText="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
    prev.onclick=function (){
        index--;
        if(index<0)
        {
            index=imgArr.length-1
        }
        img.src=imgArr[index];
        info.innerText="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
    }
    next.onclick=function (){
        index++;
        if(index>imgArr.length-1)
        {
            index=0
        }
        img.src=imgArr[index];

        info.innerText="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
    }
</script>
</body>