javascript实现点击小图显示大图
更新时间：2020年11月29日 09:02:32 作者：小小阿星
这篇文章主要为大家详细介绍了javascript实现点击小图显示大图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Promise解决回调地狱问题，文中有详细的代码示例，具有一定的参考价值，需要的朋友可以阅读参考2023-04-04
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的触摸移动，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题，需要朋友可以参考下2015-08-08
本文主要介绍了js实现自定义进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
有1到100000共10万个数。从中随机抽走两个。再把原来的数字顺序打乱。如何快速找到被抽走的两个数2011-04-04
这篇文章主要为大家详细介绍了Swiper实现导航栏滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下2023-09-09
JavaScript trim 去除字符串空格的三种方法(附代码详解)
个人认为最好的方法.采用的是正则表达式,这是最核心的原理.因为空格有多种形式。2010-05-05
这篇文章主要介绍了Threejs实现滴滴官网首页地球动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最新评论