实现图片切换效果

最新推荐文章于 2023-03-09 15:14:38 发布

是吃货不是贝爷

最新推荐文章于 2023-03-09 15:14:38 发布

阅读量2.5k

点赞数 2

分类专栏：综合运用文章标签：图片切换

本文链接：https://blog.csdn.net/q4451728/article/details/89057618

版权

综合运用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在老师开始讲这个题目前，我试着先自己琢磨，能想到需要运用数组储存图片并根据索引来达到图片随着按钮点击而切换并改变提示的功能，但是没有增加到索引增加到最大值后的处理方式。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>切换图片</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #change{
                width: 500px;
                margin: 10px auto;
                padding: 10px;
                text-align: center;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="change">
            <img src="1.jpg" alt="索隆" width="500px">
            <p id="pid"></p>
            <button id="btn1"><上一张</button>
            <button id="btn2">下一张></button>
        </div>
        <script>
            var pictureArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"]
            var syz = document.getElementById("btn1");
            var syy = document.getElementById("btn2");
            var getpel =document.getElementById("pid");
            var i = 0;
            var picture1 = document.getElementsByTagName("img")[i];
            getpel.innerHTML = "总共"+pictureArray.length+"张图片，这是第"+(i+1)+"张图片";
            syy.onclick = function(){
                i++;   //由于需要判定以下条件，不能将i++放到函数最后
                if(i > pictureArray.length-1){
                    i = 0;
                }
                picture1.src = pictureArray[i];
                getpel.innerHTML = "总共"+pictureArray.length+"张图片，这是第"+(i+1)+"张图片";
            };
            syz.onclick = function(){
                i--;       //同上
                if(i < 0){
                    i = pictureArray.length-1;
                }
                picture1.src = pictureArray[i];
                getpel.innerHTML = "总共"+pictureArray.length+"张图片，这是第"+(i+1)+"张图片";
            };
        </script>
    </body>
</html>

在了解完各个部分功能后自己将这个东西做出来