相册案例：实现点击按钮，切换目标区图片
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册案例</title>
<style>
.box {
width: 620px;
height: 780px;
background-color: #efefef;
border: 1px solid lightgray;
border-radius: 10% 10%;
margin: 20px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #444;
}
.box ul {
margin:0;
padding:0;
overflow: hidden;
}
.box ul li {
list-style-type: none;
float:left;
background-color: limegreen;
margin-left: 20px;
}
.box ul li a {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
color: white;
text-decoration: none;
}
.box ul li:hover {
font-size:1.2em;
background-color: coral;
}
.active {
font-size:1.2em;
background-color: coral;
}
.box .pic {
width: 450px;
height:450px;
/*border: 1px solid lightgray;*/
margin: 50px auto 0;
}
.box .pic img {
width: 100%;
height: 100%;
border-radius: 25% 25%;
}
.box .text{
padding: 5px 20px;
line-height: 1.5em;
color:red;
/*background-color: coral;*/
}
</style>
</head>
<body>
<div class="box">
<h2>深圳风景相册</h2>
<ul>
<li>
<a href="images/sjzc.jpg" title="世界之窗位于广东省深圳市深圳湾社区深南大道，是中国著名的缩微景区，以弘扬世界文化为宗旨，是一个把世界奇观、历史遗迹、古今名胜、民间歌舞表演融为一体的人造主题公园。">世界之窗</a>
</li>
<li>
<a href="images/hqc.jpg" title="深圳华侨城位于深圳华侨城杜鹃山，是华侨城集团继锦绣中华、中国民俗文化村、世界之窗后兴建的国内最新一代大型主题公园，占地面积32万平方米。">华侨城</a>
</li>
<li>
<a href="images/hlg.jpg" title="深圳欢乐谷位于深圳市南山区侨城西街18号，于1988年建成开园。是一座融参与性、观赏性、娱乐性、趣味性于一体的中国现代主题乐园。">欢乐谷</a>
</li>
<li>
<a href="images/jxzh.jpg" title="锦绣中华是***中旅国际投资***和深圳华侨城股份***合资兴办的大型文化主题公园，坐落在风光绮丽的深圳湾畔。">锦绣中华</a>
</li>
<li>
<a href="images/hssj.jpg" title="海上世界是一座应有尽有的国际滨海新城。">海上世界</a>
</li>
</ul>
<div class="pic">
<img src="images/zwt.jpg" alt="" id="img">
</div>
<div class="text">
<p id='info'></p>
</div>
</div>
<script>
//1.获取到所有的a标签
var pic=document.getElementsByTagName('a');
//2.获取到页面中,要被替换掉的图像元素对象
var img=document.getElementById('img');
var p=document.getElementById('info');
//3.给所有的a标签添加点击事件
for(var i=0;i<pic.length;i++){
pic[i].onclick=function () {
// 添加用户选择锁定功能: 指示出当前用户的选项
//先清除active样式，再添加active，否则会全部激活
for(var i=0;i<pic.length;i++){
pic[i].classList.remove('active');
}
this.classList.add('active');
//获取到要替换的明星图片与简介信息
var picUrl=this.href;
var picInfo=this.title;
var picName=this.innerHTML;
//将对应的图像与信息占位符进行替换
img.src=picUrl;
// p.innerHTML='<span style="color:green">'+picName+':'+'<br>'+picInfo+'</span>';
p.innerHTML='<h3>'+picName+':'+'</h3>'+picInfo;
return false;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
