首页 > 代码库 > Jqury 相册查看照片

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="http://www.mamicode.com/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="http://www.mamicode.com/images/show/0/1.jpg" alt="图片1"/>        <img src="http://www.mamicode.com/images/show/0/2.jpg" alt="图片1"/>        <img src="http://www.mamicode.com/images/show/0/3.jpg" alt="图片1"/>        <img src="http://www.mamicode.com/images/show/0/4.jpg" alt="图片1"/>        <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/main/1.jpg" alt="相册1"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/2.jpg" alt="相册2"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/3.jpg" alt="相册3"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/4.jpg" alt="相册4"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/5.jpg" alt="相册5"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/6.jpg" alt="相册6"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/7.jpg" alt="相册7"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/8.jpg" alt="相册8"/>  </li>        <li> <img src="http://www.mamicode.com/images/main/9.jpg" alt="相册9"/>  </li>    </ul></div></body></html>

  

Jqury 相册查看照片