利用js来实现简单图片切换

利用JavaScript实现图片切换

我是本际云服务器推荐网的小编小本本，今天来和大家分享利用JavaScript实现简单图片切换的方法。

利用js来实现简单图片切换

代码的主要思路如下：

代码思路

给“下一张”和“上一张”两个按钮绑定单击响应事件；
获取img标签对象，用于修改src属性的值，实现图片的切换；
切换图片实质上就是修改img标签里面src属性的值；
创建一个数组用来保存图片，操作方便；
创建一个变量用来保存当前正在显示的图片的索引；
注意：如果当前显示的图片为最后一张时，下一张使它自动跳回第一张；同理如果当前显示的图片为第一张时，上一张使它自动跳回最后一张；
设置顶部的文字先要获取对应的p标签对象；
通过修改p标签里面的文字就可以实现顶部文字的实时变换；

实现代码

下面是实现图片切换功能的代码：

  
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片切换练习</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    #outer {
    width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: aquamarine;
    }
    </style>
    <script type="text/javascript">
    window.onload = function () {
    //获取img标签
    var img = document.getElementsByTagName("img")[0];
    //创建一个数组用于保存图片的路径
    var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
    //创建一个变量保存当前正在显示的图片的索引
    var index = 0;//默认显示的是第一张
    //获取id为info的元素
    var info = document.getElementById("info");
    //设置提示文字
    info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
    //给上一张按钮绑定单击事件
    var prev = document.getElementById("prev");
    prev.onclick = function () {
    //当索引为第一张时，将索引设置为最后一张
    if (index == 0) {
    index = 5;
    }
    index = index - 1;
    //切换图片，实质上就是修改img里面的src属性
    img.src = imgArr[index];
    //设置提示文字
    info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
    }
    //给下一张按钮绑定单击事件
    var next = document.getElementById("next");
    next.onclick = function () {
    //当索引为最后一张时，将索引设置为第一张
    if (index == 4) {
    index = -1;
    }
    index = index + 1;
    //切换图片，实质上就是修改img里面的src属性
    img.src = imgArr[index];
    //设置提示文字
    info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
    }
    }
    </script>
    </head>
    <body>
    <div id=outer>
    <p id=info></p>
    <img src="img/1.jpg" alt="冰棍"/><br/>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    </div>
    </body>
    </html>