原生Js实现的画廊功能

2024-11-27 05:13:52

原生Js实现画廊功能，点击图片，在下方出现相应放大图片。给a标签绑定onclick点击事件。这里上方的小图和下方将要展示大图，都是同一张图片，只是上下两个img的style中设置了不同的width和heigth。（如果不想设置width、height，另一种方法就是将a标签里src的图片存成大图，img展示的是小图。）通过Js点击事件结合css实现大图显示或隐藏，切换图片

具体如下图，代码附上

第一种

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 200px;
            height: 100px;

        }
        #showimg{
            width: 500px;
            height: 240px;
          /*  background-color: pink;*/
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id = "imagegallery">
        <a href="../../imgs/1.jpg" rel="external nofollow"  title="pic1">
            <img src="../../imgs/1.jpg" alt="1">
        </a>

        <a href="../../imgs/2.jpg" rel="external nofollow"  title="pic2">
            <img src="../../imgs/2.jpg" alt="2">
        </a>

        <a href="../../imgs/3.jpg" rel="external nofollow"   title="pic3">
            <img src="../../imgs/3.jpg" alt="3">
        </a>

        <a href="../../imgs/4.jpg" rel="external nofollow"   title="pic4">
            <img src="../../imgs/4.jpg" alt="4">
        </a>
    </div>

    <!-- 清除浮动的 -->
    <div style="clear: both"></div>

    <!--利用空白的一个图占一个位置  -->
    <!-- <img id="image" src="" alt="" width="450px"> -->

    <img id="showimg" src="" class="hide" alt="">

    <p id="desc"></p>

    <script>
        var imagegallery = document.getElementById("imagegallery");
        var link = document.getElementsByTagName("a");
        var showimg = document.getElementById("showimg");
        var desc = document.getElementById("desc");

        //for循环内部添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后
        //批量绑定的事件的事件函数内部如果有变量i，要注意，函数执行时已经是在循环结束后
       //循环内部定义的变量是一个全局变量，在循环后执行的i变量的值是i跳出循环时的值    image.src = links[i].href;

       // for(var i = 0;i < link.length;i++){
        //     link[i].onclick = function(){
        //         // alert("123");
        //         // 更改image内部的src属性值
        //         showimg.src = link[i].href;
        //         // 更改desc内部文字描述
        //         return false;//取消a标签的默认跳转
        //     }
        // }

        for(var i = 0;i < link.length;i++){
            link[i].onclick = function(){
                // alert("123");
                // 更改image内部的src属性值
                showimg.src = this.href;//this. 关键字指代的是触发事件的真正事件源
                //更改img显示
                showimg.className = "show";
                // 更改desc内部文字描述
                desc.innerText = this.title;
                return false;//取消a标签的默认跳转
            }
        }

    </script>
</body>
</html>

第二种

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>简易灯箱画廊设计</title>
	<style>
	*{
		margin: 0;
	}
		#total{
			width:100%;
			background-color: green;
			height:1000px;
		}
        #fpic{
        	margin-left: 15%;
        }
		.pic{
			margin : 50px;
			width: 100px;
			height: 100px;
		}
		#show-bigger{
			margin: auto;
			width: 600px;
			height: 450px;
			background-color: red;
		}
	</style>
</head>
<body >
<div id="total">
<h3 style="color: white;text-align:center;">简易画廊设计</h3>
<hr color="red">
<img  class="pic" id="fpic"src="trees/t1.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t2.jpg" onclick="myfunction(this)"  tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t3.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t4.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t5.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<img  class="pic" src="trees/t6.jpg" onclick="myfunction(this)" tabIndex=1 onblur="myfunction1(this)">
<div id="show-bigger"><img  id="spic" src="trees/t1.jpg" style="width: 100%;height: 100%"></div>
</div>
</body>
<script type="text/javascript">
	function myfunction(x){                          //改变展示框的图片和被选中展示图片的边框
		document.getElementById("spic").src=x.src;
		x.style.borderBottom="5px solid red";
	}
	function myfunction1(x){     //消除未选择的边框属性
		x.style.border="none";
	}
</script>
</html>

以上就是原生Js实现的画廊功能的详细内容，更多关于Js实现画廊功能的资料请关注我们其它相关文章！

JS+CSS3实现超炫的散列画廊特效

下面来介绍下我按照网上的视频讲解实现的照片墙效果图. 最终实现的效果包括如下: •当点击某张图片时,该图片移到中间区域并放大显示.当图片被点击时正反面切换显示. •某张图片被点击时,所有的图片的位置被随机重排 •某个控制按钮被点击时,对应的图片显示到正中间,控制按钮进行相应的样式切换.当连续点击某个控制按钮时,图片伴随着按钮的点击进行正反面切换对整个效果进行VCD分解,如下图: 按照计算机能理解的方式来分解案例. •View视觉 : HTML + css 基本界面模板 •Controller
javascript实现支持移动设备画廊

这是一款不依赖任何js框架.纯javascript实现的画廊效果.它支持移动设备手势操作,如手势触摸滑动.放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe. 展示效果图如下: 查看演示下载源码 HTML 首先加载所需的CSS和js文件. <link rel="stylesheet" href="css/photoswipe.css"> <link rel="styleshee
纯JS开发baguetteBox.js响应式画廊插件

baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 效果演示下载源码好了,看下本文重点内容. baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用特点纯JS编写,无任
原生Js实现的画廊功能

原生Js实现画廊功能,点击图片,在下方出现相应放大图片.给a标签绑定onclick点击事件.这里上方的小图和下方将要展示大图,都是同一张图片,只是上下两个img的style中设置了不同的width和heigth.(如果不想设置width.height,另一种方法就是将a标签里src的图片存成大图,img展示的是小图.)通过Js点击事件结合css实现大图显示或隐藏,切换图片具体如下图,代码附上第一种 <html lang="en"> <head>
原生JS实现的双色球功能示例

本文实例讲述了原生JS实现的双色球功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net - JS双色球</title> <style> #datePicker { width: 100px; hei
原生js实现拖拽功能基本思路详解

如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化;元素的移动就是style.position的 top和left的改变.当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的. 基本思路如下: 拖拽状态
原生JS实现的碰撞检测功能示例

本文实例讲述了原生JS实现的碰撞检测功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS碰撞检测</title> <style> div{width:100px; height:100px; } #box{background:red; position:absolu
原生js+cookie实现购物车功能的方法分析

本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span> <input type="button" value="加
原生JS实现简单计算器功能

本文实例为大家分享了JS实现简单计算器功能的具体代码,供大家参考,具体内容如下使用html和css写出计算器的基本结构和样式,用原生JS实现计算器的加减乘除运算功能,只能计算简单的两位数的运算,不支持三个数连加或者连乘等等.一次计算完成之后再进行下一次运算不需要clear,可以直接进行下次运算.具体实现如下: html结构: <div id="box">
原生js实现随机点名功能

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
原生JS实现留言板功能

本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); var oPos
原生JS实现拖拽功能

本文实例为大家分享了JS实现拖拽功能的具体代码,供大家参考,具体内容如下拖拽的原理:三个事件 onmousedown.onmousemove.onmousemove 1.鼠标按下,触发onmousedown,获取鼠标坐标x,y,获取元素坐标x,y 通过event.clientX.event.clientY获取鼠标位置的坐标 let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离 let y = e.clientY - box.offsetT
原生js实现购物车逻辑和功能

本文实例为大家分享了js实现购物车逻辑和功能的具体代码,供大家参考,具体内容如下 1.购物车的主体内容布局尽量用表格的布局模式 2.判断用户是否登录代码如下,可以根据自己头部的布局来具体修改 // 判断用户是否登录 var username = getCookie("username"); //如果登录成功就执行这段代码 if(username){ var vip = $(`<a href='javascript:;'>欢迎<b>${username}<

原生Js实现的画廊功能

第一种

第二种

相关推荐

随机推荐