【无标题】经典图片切换练习

直条纹先生

已于 2022-06-30 11:23:29 修改

阅读量135

点赞数

分类专栏： web前端文章标签： javascript 前端 html

于 2022-06-30 11:21:26 首次发布

本文链接：https://blog.csdn.net/weixin_45936141/article/details/125537062

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该博客介绍了一个使用JavaScript编写的经典图片切换练习，通过点击上一张和下一张按钮实现图片在一组预定义路径中的切换。代码中包含了HTML、CSS和JavaScript的实现细节，展示了如何动态修改图片的src属性并更新相关信息提示。

摘要由CSDN通过智能技术生成

经典图片切换练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> 

        *{

            margin: 0;
            padding: 0;
        }
        #outer{

            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: yellowgreen;
            /*
            设置文本居中
            */
            text-align: center;
        }
    </style>

    <script type="text/javascript">

            window.onload = function(){

                /*
                点击按钮切换图片
                */

                //获取两个按钮
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");


                /*
                要切换图片就是要修改img标签里的src属性
                */

                //获取img标签
                var img = document.getElementsByTagName("img")[0];
                
                //创建一个数组，用来保存图片路径
                var imgArr = ["img/3.webp","img/4.webp","img/5.webp","img/6.webp","img/7.webp","img/8.webp"];
                //创建一个变量，来保存当前正在显示的图片的索引
                var index = 0;

                //获取id为info的P元素
                var info = document.getElementById("info");
                //设置提示文字
                info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";



                //分别为两个按钮绑定单击响应函数
                prev.onclick = function(){
                   

                    /*
                    切换到上一张，索引自减
                    */
                    index --;

                    //判断Index是否小于0
                    if(index < 0){
                        index = 0;
                    }
                    img.src = imgArr[index];

                    //当点击按钮以后，重新设置信息
                    info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";

                };

                next.onclick = function(){
                   
                    /*
                    切换到上一张，索引自增
                    */
                   index ++;

                    //判断Index是否小于0
                    if(index > imgArr.length - 1){
                        
                        index = imgArr.length - 1;

                    }
                    //要修改一个元素的属性  元素.属性 = 属性值
                    img.src = imgArr[index];
                     //当点击按钮以后，重新设置信息
                     info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";

                };

            };

    </script>
</head>
<body>
    <div id="outer">

        <p id="info">一共五张图片，当前是第一张</p>
        <img src = "img/3.webp" alt = "冰棍" />
        <button id="prev">上一张</button>
        <button id="next">下一张</button>

    </div>
</body>
</html>

实例效果：
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiCMSMjV-1656559215219)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220630111837853.png)]