实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
ul,li,p,h2,div {
margin: 0;
padding: 0;
}
div#photo {
width: 680px;
height:700px ;
margin: 20px auto;
background-color: #a6cbd3;
text-align: center;
box-shadow:3px 3px 3px #e49b67;
border-radius: 10px;
}
div#photo h2 {
padding: 18px;
color:red;
}
div#photo ul {
width: 520px;
height: 28px;
margin:10px auto;
/*overflow: hidden;*/
}
div#photo ul li {
width: 80px;
height: 28px;
line-height: 28px;
list-style: none;
float:left;
margin-left: 20px;
/*border: 1px solid #636363;*/
border-radius: 3px;
background: #caffe7;
}
div#photo ul li a {
text-decoration: none;
display: block;
}
div#photo ul li a:hover {
background-color: #d4d3ff;
color: #111eff;
font-size: 1.1rem;
}
div.pic {
margin:40px auto 0;
width: 400px;
height:400px;
line-height: 400px;
border: 1px solid gainsboro;
background: #e7eedf;
}
div.pic img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="photo">
<h2>群星璀璨</h2>
<ul>
<li><a href="http://www.86kx.com/uploads/allimg/131129/2291-1311292355580-L.jpg" title="知性女明星">高圆圆</a></li>
<li><a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537766653627&di=db6ec0798bfc05b44ce283c7b6be02e0&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fent%2Fv%2Fm%2F2007-06-12%2FU1982P28T3D1593956F326DT20070612144640.jpg" title="宫斗戏明星">孙俪</a></li>
<li><a href="http://5b0988e595225.cdn.sohucs.com/q_mini,c_zoom,w_640/images/20170817/742cf4b208494c739d63722beffb4346.jpeg" title="现代小***">赵丽颖</a></li>
<li><a href="http://photocdn.sohu.com/20130619/Img379240802.jpg" title="绯闻范爷">范冰冰</a></li>
<li><a href="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg" title="PHP中文网智多星">老朱</a></li>
</ul>
<!--图片展示-->
<div class="pic"><img src="" alt="" class="img">你想看谁？</div>
<!--文字说明-->
<p class="note"></p>
</div>
</body>
<script>
//获取元素
let pic = document.getElementsByTagName('a');
let img = document.getElementsByClassName('img')[0];
let note = document.getElementsByClassName('note')[0];
for (let i=0;i<pic.length;i++){
pic[i].onclick =function (event) {
// alert(event.type);
//获取图像信息
let picUrl = pic[i].href;
// alert(picUrl);
let picTitle = pic[i].title;
let picName = pic[i].innerHTML;
// alert(img);
//内容替换
img.src = picUrl;
note.innerHTML = picName+':'+picTitle;
return false;
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例