当前访客身份:游客 [ 登录 | 加入开源中国 ]

代码分享

当前位置:
代码分享 » JavaScript  » Web编程
如弈如意

图片切换,淡入淡出

如弈如意 发布于 2016年08月20日 14时, 0评/1468阅
分享到: 
收藏 +0
0
刚上手js,随便敲敲
标签: <无>

代码片段(1) [全屏查看所有代码]

1. [文件] 01重写,带图片淡入淡出.html ~ 1KB     下载(52)     跳至 [1] [全屏预览]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul{overflow: hidden;}
			li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}
			img{width:306px;opacity: 0;}
			.active{background:yellow}
		</style>
		
		
	</head>
	<body>
		<ul>
			<li>王宝强</li>
			<li>马蓉</li>
			<li>宋吉</li>
		</ul>
		<img src=""/>
	</body>
	<script src="public.js"></script>
		<script type="text/javascript">
			var oLi=document.getElementsByTagName("li");
			var oImg=document.getElementsByTagName("img")[0];
			var arr=['img/wbb.jpg','img/wlp.jpg','img/qs.jpg']
			var time=null;
			var time1=null;
			
			for(i=0;i<oLi.length;i++){
				oLi[i].index=i;
				oLi[i].onclick=function(){
					for(i=0;i<oLi.length;i++){
						oLi[i].className="";
					}
					this.className="active";
					oImg.src=arr[this.index];
					
					var num=0;
					var step=2;
					clearInterval(time);
					clearInterval(time1);
					time = setInterval(function(){
						num+=step;
						if(num>=200){
							num=200;
							clearInterval(time);
						}
						oImg.style.opacity = num/200;
					},20)
	
				}
			}
			
		</script>
</html>


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

开源从代码分享开始 分享代码
如弈如意的其它代码 全部(1)...