JavaScript进阶学习之图片操作1-职坐标

JavaScript进阶学习之图片操作1

沉沙 2018-10-19 来源：阅读 962 评论 0

摘要：本篇教程介绍了JavaScript进阶学习之图片操作1，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript进阶学习之图片操作1，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

在网页中，经常需要对图片经常各种操作，包括切换，轮播等等，接下来将总结一些常见的图片操作，首先是最简单前后切换。

如上面所示，通过点击右边的按钮切换左边的图片，为了实现想要的效果，首先，我们需要在html中创建一个放照片的容器和两个切换的按钮。

<img id="icon" src="img/icon_01.png" alt="">
<button id="prev">上一张</button>
<button id="next">下一张</button>

然后，我们需要知道当前图片的索引，当点击上一张的时候，索引自减；点击下一张的时候，索引自增。（图片后缀的数字代表当前图片的序号，如果用数组，则可以直接用索引获取图片地址了）
复制代码

<script>
window.onload = function () {
        // 1. 获取需要的标签
        var icon = document.getElementById("icon");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var currentIndex = 1;  //默认显示第一张
        prev.onclick = function () {
             currentIndex --;
            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };

        next.onclick = function () {
             currentIndex ++;
             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };
    }
</script>

复制代码

现在，已经可以进行基本的上下切换了，但是图片的数量有限，当切换到最后一张的时候，再点击下一张，就会报错，在第一张的时候点击上一张也会报错，所以，我们需要设置两个边界值，最大值代表图片的总数量，当到达最大值，再点击下一张时，应该从1开始重新计数；最小值代表1，也是初始化时默认显示的序号，此时点击上一张的时候，应该从最大值重新开始计数。
复制代码

var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
        prev.onclick = function () {
            if (currentIndex === minIndex){ // 边界值
                currentIndex = maxIndex;
            }else { // 正常情况
                currentIndex --;
            }
            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };

        next.onclick = function () {
             if (currentIndex === maxIndex){ // 边界值
                 currentIndex = minIndex;
             }else { // 正常情况
                 currentIndex ++;
             }
             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };

复制代码

这样，简易的图片切换效果就实现了，完整代码如下：（完整代码下载链接：点这里）
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img id="icon" src="img/icon_01.png" alt="">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var icon = document.getElementById("icon");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var maxIndex = 9, minIndex = 1, currentIndex = minIndex;
        prev.onclick = function () {
            if (currentIndex === minIndex){ // 边界值
                currentIndex = maxIndex;
            }else { // 正常情况
                currentIndex --;
            }
            icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };

        next.onclick = function () {
             if (currentIndex === maxIndex){ // 边界值
                 currentIndex = minIndex;
             }else { // 正常情况
                 currentIndex ++;
             }
             icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
        };
    }
</script>
</body>
</html>