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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
angularJS 入门基础
Feb 09 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
jquery实现轮播图效果
Feb 13 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
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取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
AngularJS快速入门
2015/04/02 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
javascript前端实现多视频上传
2020/12/13 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
用python生成1000个txt文件的方法
2018/10/25 Python
Pandas分组与排序的实现
2019/07/23 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
优秀学生事迹材料
2014/02/08 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
MySQL GTID复制的具体使用
2022/05/20 MySQL