JavaScript实现简单的图片切换功能

最新推荐文章于 2021-08-17 22:05:19 发布

原创最新推荐文章于 2021-08-17 22:05:19 发布 · 729 阅读

1 ·

CC 4.0 BY-SA版权

转载请说明文章详细出处

文章标签：

#js

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文详细解析了一个基于HTML、CSS和JavaScript实现的图片切换器代码。该代码通过一个按钮控制图片的前后切换，实现了图片的循环展示效果。文章中包含了完整的代码示例，适合初学者学习和理解网页图片轮播的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            margin: 50px auto;
            padding: 20px;
            background-color: skyblue;
            text-align: center;
        }
        img{
            width: 200px;
            height: 200px;
            margin: 20px 0;
        }
    </style>
    <script>
        // 存储照片地址的数组
        let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];

        // 照片的索引
        let index = 0;
        window.onload = function() {
            let oP = document.getElementsByTagName("p")[0];
            oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";

            let oImg = document.getElementsByTagName("img")[0];
            let oPrev = document.getElementsByClassName("prev")[0];
            let oNext = document.getElementsByClassName("next")[0];

            // 点击上一张响应事件
            oPrev.onclick = function () {
                index--;
                //实现照片循环
                if (index < 0) {
                    index = imgArr.length-1;
                }
                oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
                oImg.src = imgArr[index];

            };

            // 点击下一张响应事件
            oNext.onclick = function () {
                index++;
                //实现照片循环
                if (index >= imgArr.length) {
                    index = 0;
                }
                oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
                oImg.src = imgArr[index];
            };
        };
    </script>
</head>
<body>
    <div class="box">
        <p></p>
        <img src="../../images/animal1.png" alt="">
        <button class="prev">上一张</button>
        <button class="next">下一张</button>
    </div>
</body>
</html>