html 部分
<ul id="imagegallery">
<!--onclick="showPic(this); return false;":因为onclick时间处理函数所触发的js代码返回给他的值是false,所以a链接不会跳转-->
<li><a href="1/1.jpg" title="我好不好看"><img src="1/1.jpg" alt=""></a></li>
<li><a href="2/1.jpg" title="不认识我了"><img src="2/1.jpg" alt=""></a></li>
<li><a href="3/1.jpg" title="没见过吧"><img src="3/1.jpg" alt=""></a></li>
</ul>
<img id='placeholder' src="1/1.jpg" alt="my image gallery">
<p id ='description'>45码的鞋子在你脸边徘徊</p>
js部分
//判断鼠标点击的函数
function prepareGallery(){
//判断是否支持 document.getElementById document.getElementsByTagName document.getElementById("imagegallery")
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("imagegallery")) return false;
//获取数据
var gallery = document.getElementById('imagegallery');
var links = gallery.getElementsByTagName("a");
//循环出a的个数 通过循环的索引 从而获取点击事件 如果点击了 就返回 flase 没有就返回true 并且调用showPic函数
for ( var i = 0 ; i<links.length; i++){
links[i].onclick = function (){
return !showPic(this);
}
}
}
// window.onload : 方法用于在网页加载完毕后立刻执行的操作
//将函数绑定到window.onload事件上
window.onload = prepareGallery();
//设置更改图片和文字的函数
function showPic(whichpic){
// 判断图片是都存在
if(!document.getElementById('placeholder')) return false;
// whichpic:代表一个节点
// getAttribute:把href的路径作为参数存储到sourcr
var sourcr = whichpic.getAttribute("href");
// 获取idplaceholder
var placeholder=document.getElementById('placeholder');
// 使用setAttribute对placeholder元素的src属性进行刷新
// 将图片的路径刷新
placeholder.setAttribute("src",sourcr);
// 更新描述
// 判断文字是否存在
if(document.getElementById("description")){
//如果有图片就返回图片 没有的话就返回空
var text = whichpic.getAttribute('title') ? whichpic.getAttribute("title"):" ";
// 获取id 为description的值
var description = document.getElementById("description");
// 测试是否可以获得数据
// firstChild:返回节点的第一个子节点
// nodeValue:得到第一个节点的值
// console.log(description.firstChild.nodeValue);
// 将text赋值给description,是description达到点击之后改变的效果
description.firstChild.nodeValue = text;
// }
}
return true;
}
css样式
body{
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;
}
img{
display: block;
clear:both;
width:400px;
height:400px;
}
ul li img{
width:105px;
height:105px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e17ad52af5fb7b4d8dd1a511738af56b.png#pic_center)