JS图片切换案例

梦樊哥哥

已于 2022-02-15 17:44:46 修改

阅读量1.4k

点赞数

分类专栏： JS详解（从零到一）文章标签： javascript

于 2022-02-15 17:11:34 首次发布

本文链接：https://blog.youkuaiyun.com/mengfanshaoxia/article/details/122948486

版权

JS详解（从零到一）专栏收录该内容

25 篇文章

订阅专栏

JS图片切换案例

一、案例需求

点击上一张或下一张按钮，图片会切换

二、案例分析、

1、事件源：按钮（button）

2、事件类型：点击（onclick）

3、事件处理程序：

（1）首先要判断图片编号

（2）图片切换：改变img的src路径

三、准备工作

1、照片4张

2、命名格式统一：p1.png、p2.png、p3.png、p4.png

3、将4张照片放入image文件里

四、代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="images/image01.jpg" id="flower">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        // 1. 获取元素
        var img = document.querySelector('img')
        var btn1 = document.querySelector('#prev')
        var btn2 = document.querySelector('#next')

        var minIndex = 1,
            maxIndex = 4,
            currentIndex = minIndex;
        // 2. 添加事件
        btn1.onclick = function() {
            //判断编号是否大于4，大于则将最小值赋给当前索引
            if (currentIndex === minIndex) {
                currentIndex = maxIndex;
            } else {
                currentIndex--;
            }
            img.src = 'images/image0' + currentIndex + '.jpg';
            // img.setAttribute('src', `images/image0${currentIndex}.jpg`); //ES6语法
        };
        btn2.onclick = function() {
            //判断编号是否大于4，大于则将最小值赋给当前索引
            if (currentIndex >= maxIndex) {
                currentIndex = minIndex;
            } else {
                currentIndex++;
            }
            img.src = 'images/image0' + currentIndex + '.jpg';
            // img.setAttribute('src', `images/image0${currentIndex}.jpg`); //ES6语法
        };
    </script>
</body>

</html>