qq相册图片轮播js代码

来源：互联网发布：macbook软件安装目录编辑：程序博客网时间：2024/06/10 02:44

温故而知新，可以为师矣。还是坚持每天学习一点点进步一点点！昨天学习了下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].onclick=function(){index=this.i;//获取该li的索引box.style.display='block';pic.style.display='block';getSrc();}}box.onclick=function(){box.style.display='none';pic.style.display='none';}function $(id){return document.getElementById(id);}$('right').onclick=function(){index++;//if (index>lis.length-1) {index=0;alert('已经是最后一张了！')}可优化 两种方法取一index%=lis.length;getSrc();}$('left').onclick=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代码部分有可待优化的部分，大家一边学习一边修改吧！！！

1 0