javascript实现点击小图显示大图


Posted in Javascript onNovember 29, 2020

本文实例为大家分享了javascript实现点击小图显示大图的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  body {
   font-family: "Helvetica", "Arial", serif;
   color: #333;
   background-color: #ccc;
   margin: 1em 10%;
  }

  h1 {
   color: #333;
   background-color: transparent;
  }

  a {
   color: #c60;
   background-color: transparent;
   font-weight: bold;
   text-decoration: none;
  }

  ul {
   padding: 0;
  }

  li {
   float: left;
   padding: 1em;
   list-style: none;
  }

  #imagegallery {

   list-style: none;
  }

  #imagegallery li {
   margin: 0px 20px 20px 0px;
   padding: 0px;
   display: inline;
  }

  #imagegallery li a img {
   border: 0;
  }
 </style>
</head>
<body>

<h2>
 美女画廊
</h2>

<ul id="imagegallery">
 <li>
  <a href="images/1.jpg" rel="external nofollow" title="美女A">
 <img src="images/1-small.jpg" width="100" alt="美女1"/>
  </a>
 </li>
 <li><a href="images/2.jpg" rel="external nofollow" title="美女B">
  <img src="images/2-small.jpg" width="100" alt="美女2"/>
 </a></li>
 <li><a href="images/3.jpg" rel="external nofollow" title="美女C">
  <img src="images/3-small.jpg" width="100" alt="美女3"/>
 </a></li>
 <li><a href="images/4.jpg" rel="external nofollow" title="美女D">
  <img src="images/4-small.jpg" width="100" alt="美女4"/>
 </a></li>
</ul>


<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script>
 // 获取ul元素对象
 var imagegallery = document.getElementById("imagegallery")
 // 获取a元素 数组
 var a = imagegallery.getElementsByTagName("a")
 
 // 获取大图元素对象
 var image = document.getElementById("image")
 
 // 获取p标签
 var des = document.getElementById("des")
 // console.log(imagegallery,a)
 
 // 遍历数组元素为每一个a链接注册点击事件
 for(var i = 0; i < a.length; i++){
 a[i].onclick = function(){
  // 将a链接中的href中的值赋值给大图的src属性
  image.src = this.href
  // 将a链接中的title的值作为内容赋值给p标签
  des.innerHTML = this.title
  return false
 }
 }
 //点击a标签,把a标签中的href的属性值给id为image的src属性
 //把a的title属性的值给id为des的p标签赋值
 //阻止超链接默认的跳转
  // return false;

</script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
小程序实现五星点评效果
Nov 03 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
You might like
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
技校生自我鉴定
2013/12/08 职场文书
证婚人经典证婚词
2014/01/09 职场文书
团组织关系介绍信
2014/01/12 职场文书
会议通知格式范文
2015/04/15 职场文书
安全教育第一课观后感
2015/06/17 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书