Jqury 相册查看照片
Posted 常想一二
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jqury 相册查看照片相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* reset css 样式重置 */ body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,img,div,form,fieldset,select，textarea,input{margin:0;padding:0;} input,select,textarea{outline:none; border:none; background:#FFF;} body{ margin: 0 auto; padding:0;font-size:12px;} table{border-collapse:collapse;} textarea{ resize:none;overflow:auto;} a{text-decoration:none; } li{list-style:none;vertical-align:top;} img{border:none; vertical-align:top;} /* 浮动 and 清浮动：类选择器class="clearfix"加在浮动元素的父元素上，来清除该标签元素的浮动对后面标签元素造成的影响 */ .fl{float:left} .fr{float:right} .clearfix:after{content:"";display:block;clear:both;} .clearfix{zoom:1;} /* end reset css */ /* 通用样式 */ body{font:normal 12px/20px "Microsoft YaHei"; } .width960{ width: 960px; margin: 0 auto;} /* 弹窗 */ .floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50); display: none; } .alerts{position:absolute;top:50%;left:50%;margin-left:-402px; margin-top:-302px;width:800px; height:600px; display: none; background:#fff; border:2px solid yellow; } /* 页面样式 */ .bgCon{ margin-top: 100px;} .bgCon .photoAlbum li{ float: left; width: 300px;height: 224px;padding: 4px;margin: 4px;border:2px solid red } img { width: 100%; height: 100%;} .photoContainer ul,.photoContainer div{ position: absolute} .photoContainer ul{ bottom: 1%; left: 35%; width: 50%; height: 8%; background: rgba(0,0,255,0.4); } .photoContainer li{ width: 10%; margin-right: 10%; height: 90%; border-radius: 50%; background: rgba(255,255,255,1); /* 右浮动li顺序-最后一个li在最左边： img顺序图片最后一张在最上面*/ float: right; } .photoContainer li.active{ background: rgba(255,0,0,1); } .arrow{ top: 50%; margin-top: -40px; width: 60px; height: 80px; line-height: 80px; font-size:50px; background: rgba(125,125,125,0.7); } #leftArrow{ left: 0; } #rightArrow{ right: 0; } .photoContainer .imgBox{width:800px; height:600px; overflow: hidden; } .photoContainer .imgBox img{position: absolute } </style> <script src="../jquery-3.0.0.js" > </script> <script> $( function(){ var srcArr= [ ["images/show/0/1.jpg","images/show/0/2.jpg" , "images/show/0/3.jpg","images/show/0/4.jpg" , "images/show/0/5.jpg" ], ["images/show/1/1.jpg","images/show/1/2.jpg" , "images/show/1/3.jpg","images/show/1/4.jpg" , "images/show/1/5.jpg" ], ["images/show/2/1.jpg","images/show/2/2.jpg" , "images/show/2/3.jpg","images/show/2/4.jpg" , "images/show/2/5.jpg" ], ["images/show/3/1.jpg","images/show/3/2.jpg" , "images/show/3/3.jpg","images/show/3/4.jpg" , "images/show/3/5.jpg" ], ["images/show/4/1.jpg","images/show/4/2.jpg" , "images/show/4/3.jpg","images/show/4/4.jpg" , "images/show/4/5.jpg" ], ["images/show/5/1.jpg","images/show/5/2.jpg" , "images/show/5/3.jpg","images/show/5/4.jpg" , "images/show/5/5.jpg" ], ["images/show/6/1.jpg","images/show/6/2.jpg" , "images/show/6/3.jpg","images/show/6/4.jpg" , "images/show/6/5.jpg" ], ["images/show/7/1.jpg","images/show/7/2.jpg" , "images/show/7/3.jpg","images/show/7/4.jpg" , "images/show/7/5.jpg" ], ["images/show/8/1.jpg","images/show/8/2.jpg" , "images/show/8/3.jpg","images/show/8/4.jpg" , "images/show/8/5.jpg" ], ]; //点击某个相册： $(".photoAlbum li").click(function(ev){ var albumIndex = $(this).index(); $(".floats").eq(0).css("display","block"); $(".alerts").eq(0).css("display","block"); //初始化相册分图片：该相册的对应的图片：注意绝对定位照片重叠，底下是第一张上面是第五张 for( var i =0 ;i< $(".photoContainer img").length ;i++){ $(".photoContainer img").eq(i).attr("src", srcArr[albumIndex][i]); } //初始化：小圆点高亮显示 var photoIndex = srcArr[albumIndex].length-1; $(".photoContainer li").eq(photoIndex).attr("class","active"); $("#leftArrow").click(function(ev){ // 小圆点高亮显示 if(( --photoIndex)<=-1 ){photoIndex= srcArr[albumIndex].length-1 } $(".photoContainer li").eq(photoIndex).attr("class","active").siblings().attr("class",""); $(".photoContainer img:last").animate({ "left":"-100%","top":"0px" },600, function(){ $(this).css("left","0").css("top","0"); //剪切： $(this).prependTo($(".photoContainer .imgBox")); }); ev.stopPropagation(); }); $("#rightArrow").click(function(ev){ // 小圆点高亮显示 if(( --photoIndex)<=-1 ){photoIndex= srcArr[albumIndex].length-1 } $(".photoContainer li").eq(photoIndex).attr("class","active").siblings().attr("class",""); $(".photoContainer img:last").animate({ "left":"100%","top":"0px" },600, function(){ $(this).css("left","0").css("top","0"); //剪切： $(this).prependTo($(".photoContainer .imgBox")); }); ev.stopPropagation(); }); ev.stopPropagation(); }); $(document).click(function(){ $(".floats").css("display","none"); $(".alerts").css("display","none"); }); }); </script> </head> <body> <div class="floats"></div> <div class="alerts photoContainer "> <div class="imgBox"> <img src="images/show/0/1.jpg" alt="图片1"/> <img src="images/show/0/2.jpg" alt="图片1"/> <img src="images/show/0/3.jpg" alt="图片1"/> <img src="images/show/0/4.jpg" alt="图片1"/> <img src="images/show/0/5.jpg" alt="图片1"/> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="arrow" id="leftArrow"> < </div> <div class="arrow" id="rightArrow"> > </div> </div> </div> <div class="width960 bgCon"> <ul class="photoAlbum"> <li> <img src="images/main/1.jpg" alt="相册1"/> </li> <li> <img src="images/main/2.jpg" alt="相册2"/> </li> <li> <img src="images/main/3.jpg" alt="相册3"/> </li> <li> <img src="images/main/4.jpg" alt="相册4"/> </li> <li> <img src="images/main/5.jpg" alt="相册5"/> </li> <li> <img src="images/main/6.jpg" alt="相册6"/> </li> <li> <img src="images/main/7.jpg" alt="相册7"/> </li> <li> <img src="images/main/8.jpg" alt="相册8"/> </li> <li> <img src="images/main/9.jpg" alt="相册9"/> </li> </ul> </div> </body> </html>
以上是关于Jqury 相册查看照片的主要内容，如果未能解决你的问题，请参考以下文章