JavaScript实现左右点击切换图片具体代码丨本际云推荐

JavaScript实现左右点击切换图片具体代码

图片切换示例

这是一个实现图片左右点击切换的示例，可以参考一下代码实现。

JavaScript实现左右点击切换图片具体代码

代码实现

以下是实现图片切换的HTML和JavaScript代码，其中CSS样式可以根据需要自行编写：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>图片切换示例</title>
  <link rel="stylesheet" type="text/css" href="./css/Photo_album.css">
</head>
<body>
  <div id="imgmax">
    <ul>
      <li><img src="./img/brtx.jpeg"></li>
      <li><img src="./img/1.jpeg"></li>
      <li><img src="./img/2.jpeg"></li>
      <li><img src="./img/3.jpeg"></li>
      <li><img src="./img/brtx.jpeg"></li>
      <li><img src="./img/brtx.jpeg"></li>
    </ul>
  </div>
  <script src="js/Photo_album.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

/*
说明：根据li标签，得到当前网页所有的li元素
返回值：返回的是数组，存储所有的li元素
作用：
1.可用于监听点击事件
2.可根据当前li元素得到内部存储的图片路径
3.可根据图片的路劲，做一个大图展示
*/
var lis = document.getElementsByTagName("li");

/*
说明：根据id，得到imgmax元素
返回值：返回的是最大的盒子元素
作用：
可像此盒子内【追用】预览图片时所需的所有【元素】
1.追加盒子元素（用于遮盖当前所有图片）
2.追加图片元素（用于展示【预览图】）
3.追加span文字（用于展示“X”,退出预览）
*/
var box = document.getElementById("imgmax");
var index = 0;

//循环遍历li标签
//迭代所有的【li】，用于监听【li】的点击事件
for (let i = 0; i < lis.length; i++) {
  /*
  当监听成功，绑定【匿名函数】，用于编写具体的逻辑
  1.得到当前点击li元素的图片路径
  2.创建：div元素，用于遮盖当前所有图片
  3.创建：img元素，用于展示【预览图】
  4.创建 span元素（用于展示“X”,退出预览）
  */
  lis[i].onclick = function() {
    //2.创建：div元素，用于遮盖当前所有图片
    var j = i;
    var newDiv = document.createElement('div');
    newDiv.className = "newdiv";
    box.appendChild(newDiv);

    //3.创建：img元素，用于展示【预览图】
    var newImg = document.createElement("img");
    newImg.className = "newimg";
    newImg.src = this.getElementsByTagName("img")[0].src;
    box.appendChild(newImg);

    //创建 span元素（用于展示“X”,退出预览）
    var newSpan = document.createElement("span");
    newSpan.innerHTML = "X";
    newSpan.className = "newspan";
    box.appendChild(newSpan);
    newSpan.onclick = function(){
      box.removeChild(newDiv);
      box.removeChild(newImg);
      box.removeChild(Spanz);
      box.removeChild(Spany);
      box.removeChild(newSpan);
    }

    //左边
    var Spanz = document.createElement("span");
    Spanz.innerHTML = "<";
    Spanz.className = "newspanzuo";
    box.appendChild(Spanz);
    Spanz.onclick = function(){
      if (j-- >= 0) {
        newImg.src = document.getElementsByTagName("img")[j].src;
      } else {
        alert("已经是第一张了！！");
      }
    }

    //右边
    var Spany = document.createElement("span");
    Spany.innerHTML = ">";
    Spany.className = "newspanyou";
    box.appendChild(Spany);
    Spany.onclick = function(){
      if (j++ < lis.length-1) {
        newImg.src = document.getElementsByTagName("img")[j].src;
      } else {
        alert("已经是最后一张了！！");
      }
    }
  }
}

希望以上示例和代码可以对大家学习HTML和JavaScript有所帮助。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7267.html