March 23, 2017

在网页中用JavaScript交替显示两张图片

页面的效果是：两个图片交替显示，每点击图片，显示下一站图片。

准备好要使用的两张图片，然后熟练使用编辑器快速新建一个项目。

<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #img-box {
            width: 200px;
            height: 200px;
        }
    </style>

    <img id="img-box" src="./1.png">
    <script>
    // dosoming
    </script>

只是两张图片的交换，使用一个变量来保存下一张图片的地址即可。在图片交替时，将当前img标签中的地址与下一张图片地址作交换。由于需要保留变量的值，所以少不了使用(function(){})()这个闭包。

(function(){
  // 下一张图片的地址
  var nextSrc='./2.png';

  var img = document.getElementById('img-box');
  // 添加对img元素的单击时间监听
  img.addEventListener('click',function(){
      var temp = img.getAttribute('src');
      img.setAttribute('src', nextSrc);
      nextSrc = temp;
  },false);
})()

至此完成了一个简单的图片交替效果。但是作为一个想要进阶的程序员或者工程师，就不能想得这么简单，这样的代码在每次点击图片时，都会去本地或者网络重新加载图片，消耗资源。

所以，将两张图片同时加载到页面，然后使用css的z-index属性去实现效果是更为合适的方法。

<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #images-container {
            width: 200px;
            height: 200px;
            position: relative;
        }

        .img-item {
            position: absolute;
            width: 200px;
            height: 200px;
        }
    </style>

    <ul id="images-container">
      <img class="img-item" src="./1.png">
      <img class="img-item" src="./2.png">
    </ul>
    <script>
    // dosoming
    </script>

这里的关键点是使用css的position属性，在给图片设置absolute绝对定位时，给父容器images-container设置relative，让图片相对于父容器来定位自己。

var imgs = document.getElementsByClassName('img-item');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', function() {
        var imgs = document.getElementsByClassName('img-item');
        // 重置所有图片的z-index
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].style.zIndex = 2;
        }
        // 将当前图片放置到下层
        this.style.zIndex = 1;
    }, false);
}

实现相同效果的JavaScript很多，也可以使用jQuery让代码更加简洁，殊途同归。

从中了解：

  1. 不要一味使用div标签，首选使用语义化标签;
  2. 是否有更优雅的实现方式，让代码自己解释自己;