如何用JavaScript编写点击切换图片的功能，实现左右点击分别切换下一张和上一张图片？

2026-04-02 21:281阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计907个文字，预计阅读时间需要4分钟。

如何用JavaScript编写点击切换图片的功能，实现左右点击分别切换下一张和上一张图片？

原文示例代码为：空间相册 / ti

简化后内容：相册

本文实例为大家分享了JavaScript实现左右点击切换图片的具体代码，供大家参考，具体内容如下

效果：

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xxx——空间相册</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> </body> <script src="js/Photo_album.js" type="text/javascript" charset="utf-8"></script> </html>

CSS:

/* 相册 */ #imgmax{ width: 600px; height: 600px; position: relative; margin: 20px auto; } img{ width: 100%; height: 100%; } ui,li{ margin: 0; padding: 0; list-style: none; float: left; width: 150px; height: 150px; margin-left: 10px; } .newdiv{ width: 600px; height: 600px; background: #fff; opacity: 0.5; } .newimg{ width: 300px; height: 300px; position: absolute; left: 150px; top: 50px; } .newspan{ position: absolute; width: 20px; height: 20px; left: 450px; top: 50px; background: #fff; text-align: center; } .newspanzuo{ position: absolute; width: 20px; height: 20px; left: 100px; top: 150px; background: #fff; text-align: center; } .newspanyou{ position: absolute; width: 20px; height: 20px; left: 480px; top: 150px; background: #fff; text-align: center; }

JavaScript：

/* 说明：根据<1i>标签、得到当前网页所有的<1i>元素返回值：返回的是数组，存储所有的<1i>元素作用： 1.可用于监听点击事件 2.可根据当前<1i>元素得到内部存储的图片路径 3.可根据图片的路劲，做一个大图展示 */ var lis = document.getElementsByTagName("li"); //获取li标签 /* 说明：根据id，得到imgmax元素返回值：返回的是最大的盒子元素作用：可像此盒子内预览图片时所需的所有 1.追加盒子元素（用于遮盖当前所有图片） 2.追加图片元素（用于展示） 3.追加span文字（用于展示“X”,退出预览） */ var box = document.getElementById("imgmax"); //获取相册盒子 var index = 0; //循环遍历li标签 //迭代所有的，用于监听的点击事件 for (let i = 0; i < lis.length; i++) { /* 当监听成功，绑定，用于编写具体的逻辑 1.得到当前点击<li>元素的图片路径 2.创建：div元素，用于遮盖当前所有图片 3.创建：img元素，用于展示 4.创建 span元素（用于展示“X”,退出预览） */ lis[i].onclick = function() { //弹出当前li标签中图片路径 //alert(this.getElementsByTagName("img")[0].src) //2.创建：div元素，用于遮盖当前所有图片 // box.appendChild() 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("已经是第最后一张了！！") } } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

标签：javascript 实现左右点击切换