js基础图片的切换练习编程练习

最新推荐文章于 2024-09-20 11:38:47 发布

Rebellious-cactus

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量126

点赞数

分类专栏： js编程练习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44426449/article/details/107923914

版权

js编程练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>
<div id="outer">
    <p id="info"></p>

    <div>
        <img src="img/IMG_1482.JPG" alt="婚纱照">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
<script>
    var image=document.getElementsByTagName("img")[0];
    var prev=document.getElementById('prev');
    var next=document.getElementById("next");
    //创建一个数组。来保存图片的路径
    var path=["img/IMG_1482.JPG","img/IMG_2178.JPG","img/IMG_2179.JPG","img/timg.jpg","img/timg (1).jpg",];
    var index=0;
    var info=document.getElementById("info");
    info.innerHTML='一共有'+(path.length)+'张图片，您当前浏览的是第'+(index+1)+"张图片";
    prev.οnclick=function () {

        index--;
        if(index<0){
            index=path.length-1;
        }
        info.innerHTML='一共有'+(path.length)+'张图片，您当前浏览的是第'+(index+1)+"张图片";
        image.src=path[index];
    };
    next.οnclick=function () {


        index++;
        if (index>path.length-1){ index=0;}
        info.innerHTML='一共有'+(path.length)+'张图片，您当前浏览的是第'+(index+1)+"张图片";
        image.src=path[index];
    }
</script>
</body>