博客列表 >JS+HTNL+CSS制作相册切换功能

JS+HTNL+CSS制作相册切换功能

Dusk的博客
Dusk的博客原创
2019年05月09日 16:55:25764浏览

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box{
			width: 500px;
			height: 700px;
			background-color: #D3D3D3;
			margin: 0px auto;
			text-align: center;
			color: #636363;
			box-shadow: 2px 2px 10px #999999;
		}
		.box ul{
			padding:0;
			margin: 0;
			overflow: hidden;
		}
		.box ul li{
			list-style: none;
			float: left;
			background-color:#87CEEB;
			margin-left: 20px;
		}
		.box ul li a{
			text-decoration: none;
			font-size: 1.5em;
			color:  #EFEFEF;
			display: block;
			width: 100px;
			height: 40px;
            line-height: 40px;

		}
		 .box ul li:hover {
		    font-size:0.8em;
		    background-color: #008000;
		}
		.box .pic{
			width: 450px;
			height: 450px;
			border: 1px #FF7F50;
			margin:60px auto 0;
		}
		.box .pic img {
		    width: 100%;
		    height: 100%;
		}
		 .active {
		    font-size:1.2em;
		    background-color: coral;
		}
		</style>
	</head>
	<body>
		
		<div class="box">
			<h2>家乡风景</h2>
			<ul>
				<li>
					<a href="images/tongguan.png" title="山青">铜官山区</a>
				</li>
				<li>
					<a href="images/jiaoqu.jpg" title="水秀">郊区</a>
				</li>
				<li>
					<a href="images/yian.jpg" title="人杰">义安区</a>
				</li>
				<li>
					<a href="images/zongyang.jpg" title="地灵">枞阳区</a>
				</li>
				
			</ul>
			<div class="pic">
					<img src="images/def.jpg"id="img" />
			</div>
	<p id="info"></p>
		</div>
	
	<!-- 以下是JS代码 -->
	<script>
		//获取所有得aTAG;
		var pic = document.getElementsByTagName('a');
		//获取页面中默认图片被替换掉的元素
		 var img = document.getElementById('img');
		var p = document.getElementById('info');
		//给所有的a标签一个点击事件
		for(var i=0;i<pic.length;i++){
			pic[i].onclick = function(){
		
			
			//鼠标点击a标签后样式停留
			for(var i= 0; i<pic.length;i++){
				pic[i].classList.remove('active');
			}
				this.classList.add('active');
				
					//获取到风景图片替换的信息与文字说明
				var picUrl = this.href;
				var picName=this.innerHTML;
				var picInfo = this.title;
				
				//将图像信息进行对换
				img.src = picUrl;
				 p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>';
				return  false;
			};
		}
	</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议