qq相册图片轮播js代码

最新推荐文章于 2022-09-14 09:27:40 发布

仰望星空的包子

最新推荐文章于 2022-09-14 09:27:40 发布

阅读量947

点赞数 2

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/sinat_21206105/article/details/53330519

版权

JavaScript学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

温故而知新，可以为师矣。还是坚持每天学习一点点进步一点点！昨天学习了下QQ相册图片播放的特效。今天花了点时间写了下代码，希望对大家有帮助！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>qq相册图片切换</title>
	<style type="text/css">
		*{margin:0;padding: 0;}
		.container{margin:20px auto; width:600px;}
		.container ul li{list-style:none; width:192px;height:200px;border:3px solid transparent;float: left;overflow: hidden;}
		.container ul li:hover{border:3px solid #1db791;}
		.container ul li:hover img{border:3px solid #1db791;transform:scale(1.2);}
		.container ul li img{width: 100%;height: 100%;transition: transform 3s;}
		.box{width: 100%;height: 100%;background:rgba(0,0,0,0.5);position: fixed;top:0;left: 0;display: none;}
		.pic{width:400px;height: 400px;padding:20px; background-color: #fff; position: fixed;overflow: hidden;left:50%;margin-left:-200px; top:50%;margin-top:-200px; display: none;}
		/*top:calc(50%-100);left:calc(50%-96);*/
		.pic img{width: 100%;height: 100%;}
		.arrow{width: 30px;height: 60px;background-color:#8d8a8a; display: block;position: absolute;top:50%;margin-top:-30px; z-index:11111111;line-height: 60px;text-align: center;font-size: 30px; color:#efefef;}
		a.arrow{text-decoration: none;}
		.arr-left{left:0px;}
		.arr-right{right:0px;}

	</style>
</head>
<body>
	<div class="container" id="container">
		<ul>
			<li><img src="images/pbl/P_01.jpg" alt=""></li>
			<li><img src="images/pbl/P_02.jpg" alt=""></li>
			<li><img src="images/pbl/P_03.jpg" alt=""></li>
			<li><img src="images/pbl/P_04.jpg" alt=""></li>
			<li><img src="images/pbl/P_05.jpg" alt=""></li>
			<li><img src="images/pbl/P_06.jpg" alt=""></li>
			<li><img src="images/pbl/P_07.jpg" alt=""></li>
			<li><img src="images/pbl/P_08.jpg" alt=""></li>
			<li><img src="images/pbl/P_09.jpg" alt=""></li>
		</ul>
	</div>
	<!-- 阴影层 -->
	<div class="box" id='box'></div>
	<div class="pic" id="pic">
		<img src="images/pbl/P_01.jpg" alt="">
		<a href="#" class="arrow arr-left" id="left"><</a>
		<a href="#" class="arrow arr-right" id="right">></a>
	</div>
	<script type="text/javascript">
		var lis=document.getElementsByTagName('li');
		// var box=document.getElementsByClassName('box')[0];
		var box=$('box');
		// var pic=document.getElementsByClassName('pic')[0];
		var pic=$('pic');
		var index=0;
		for(var i=0;i<lis.length;i++){
			lis[i].i=i;
			lis[i].οnclick=function(){
				index=this.i;//获取该li的索引
				box.style.display='block';
				pic.style.display='block';		
				getSrc();

			}
		}
		box.οnclick=function(){
			box.style.display='none';
				pic.style.display='none';				


		}
		function $(id){return document.getElementById(id);}
		$('right').οnclick=function(){
			index++;
			//if (index>lis.length-1) {index=0;alert('已经是最后一张了！')}可优化 两种方法取一
			index%=lis.length;
			getSrc();

		}
		$('left').οnclick=function(){
			index--;
			if (index<0) {index=0;alert('已经是第一张了！')}
			//可优化
			//if(index<0)index=0;
			getSrc();
			
		}

		function getSrc(){
			var img=lis[index].children[0].src;
				pic.children[0].src=img;	
		}
	</script>
</body>
</html>

以上就是所以的代码，js代码部分有可待优化的部分，大家一边学习一边修改吧！！！

仰望星空的包子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
qq相册图片轮播js代码

温故而知新，可以为师矣。还是坚持每天学习一点点进步一点点！昨天学习了下QQ相册图片播放的特效。今天花了点时间写了下代码，希望对大家有帮助！ qq相册图片切换 *{margin:0;padding: 0;} .container{margin:20px auto; width:600px;} .container ul li{list-style:none; width
复制链接

扫一扫

专栏目录