脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js左右点击切换图片

JavaScript实现左右点击切换图片

 更新时间：2022年07月12日 09:03:28   作者：疑似忘川落九天  
这篇文章主要为大家详细介绍了JavaScript实现简易左右点击切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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标签
//迭代所有的【li】，用于监听【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("已经是第最后一张了！！")
        }
        }
    }
}

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

您可能感兴趣的文章:

相关文章

  • js左侧多级菜单动态的解决方案

    js左侧多级菜单动态的解决方案

    实现的效果很简单，就是点一下显示，再点一下就隐藏，只不过是多了几级的问题。好，现在来说说我的设计思路，首先从第一级别开始，添加如下代码
    2010-02-02
  • 解决layer弹出层msg的文字不显示的问题

    解决layer弹出层msg的文字不显示的问题

    今天小编就为大家分享一篇解决layer弹出层msg的文字不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript this 深入理解

    JavaScript this 深入理解

    一直以来，对于JavaScript 中的this的理解都是很模糊的， 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。
    2009-07-07
  • 基于JS实现bookstore静态页面的实例代码

    基于JS实现bookstore静态页面的实例代码

    本文给大家分享一段核心代码基于js实现的bookstore静态页面，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-02-02
  • javascript设计模式 – 代理模式原理与用法实例分析

    javascript设计模式 – 代理模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 代理模式,结合实例形式分析了javascript代理模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js面向对象之实现淘宝放大镜

    js面向对象之实现淘宝放大镜

    这篇文章主要为大家详细介绍了js面向对象之实现淘宝放大镜，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS正则表达式验证密码强度

    JS正则表达式验证密码强度

    这篇文章主要为大家详细介绍了JS正则表达式验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    这篇文章主要介绍了JavaScript实现自动生成网页元素功能，文章列出了三种可以进行增删改克隆按钮、文本等元素的方法，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 简述冻结JS对象方法技术

    简述冻结JS对象方法技术

    本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JavaScript 动态添加表格行 使用模板、标记

    JavaScript 动态添加表格行 使用模板、标记

    在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求。
    2009-10-10

最新评论