相册

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相册</title>
<style>
    body{
        margin:0px;
        padding:0px;}
    .conten{
        width:100%;
        display:none;}
    .conten img{
        width:20%;
        margin:0;
        padding:0;
        height:300px;
        float:left;}
    .big{
        width:800px;
        height:700px;
        margin:auto;overflow:hidden;
        position:relative;}
    .biglist{
        overflow:hidden;
        height:700px;
        width:999999999rem;
        top:0;
        left:0px;
        position:absolute;}
    .big  .pot{
        width:800px;
        height:700px;
        float:left;
        text-align:center;}
    .big img{
        width:100%;}
    .small{
        width:800px;
        margin:auto;
        height:80px;
        overflow:hidden;
        position:relative;}
    .smalllist{
        height:100px;
        top:0;
        left:400px;
        position:absolute;
        width:999999999rem;}
    .small .img{
        height:100px;
        width:100px;
        float:left;
        overflow:hidden;
        text-align:center;}
    .small .img img{
        width:100%;}
</style>
</head>
<body>
    <!--图片列表-->
    <div class="conten">
        <img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg">
        <img src="images/57.jpg">
        <img src="images/61.jpg">
        <img src="images/267f9e2f0708283856a839b0b899a9014d08f1e9.jpg">
        <img src="images/081757yjj9mbz95ie92r62.jpg">
        <img src="images/890845_162337350000_2.jpg">
        <img src="images/1332337685857.jpg">
        <img src="images/20126214121490973.jpg">
        <img src="images/890845_162337350000_2.jpg">
        <img src="images/1332337685857.jpg">
        <img src="images/20126214121490973.jpg">
        <img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg">
        <img src="images/57.jpg">
        <img src="images/61.jpg">
        <img src="images/267f9e2f0708283856a839b0b899a9014d08f1e9.jpg">
    </div>
    <!--看大图-->
    <div class="big">
        <div class="biglist">
            <div class="pot"><img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg"></div>
            <div class="pot"><img src="images/57.jpg"></div>
            <div class="pot"><img src="images/61.jpg"></div>
            <div class="pot"><img src="images/267f9e2f0708283856a839b0b899a9014d08f1e9.jpg"></div>
            <div class="pot"><img src="images/081757yjj9mbz95ie92r62.jpg"></div>
            <div class="pot"><img src="images/890845_162337350000_2.jpg"></div>
            <div class="pot"><img src="images/1332337685857.jpg"></div>
            <div class="pot"><img src="images/20126214121490973.jpg"></div>
            <div class="pot"><img src="images/chang.jpg"></div>
            <div class="pot"><img src="images/1332337685857.jpg"></div>
            <div class="pot"><img src="images/20126214121490973.jpg"></div>
            <div class="pot"><img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg"></div>
            <div class="pot"><img src="images/57.jpg"></div>
            <div class="pot"><img src="images/61.jpg"></div>
            <div class="pot"><img src="images/chang.jpg"></div>
        </div>
    </div>
    <div class="small">
        <div class="smalllist">
            <div class="img"><img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg"></div>
            <div class="img"><img src="images/57.jpg"></div>
            <div class="img"><img src="images/61.jpg"></div>
            <div class="img"><img src="images/267f9e2f0708283856a839b0b899a9014d08f1e9.jpg"></div>
            <div class="img"><img src="images/081757yjj9mbz95ie92r62.jpg"></div>
            <div class="img"><img src="images/890845_162337350000_2.jpg"></div>
            <div class="img"><img src="images/1332337685857.jpg"></div>
            <div class="img"><img src="images/20126214121490973.jpg"></div>
            <div class="img"><img src="images/chang.jpg"></div>
            <div class="img"><img src="images/1332337685857.jpg"></div>
            <div class="img"><img src="images/20126214121490973.jpg"></div>
            <div class="img"><img src="images/2b25d1c752ddbf775e0e909322fa6724.jpg"></div>
            <div class="img"><img src="images/57.jpg"></div>
            <div class="img"><img src="images/61.jpg"></div>
            <div class="img"><img src="images/chang.jpg"></div>
           </div>
    </div>
  <script src="scripts/jquery.min.js"></script>
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript"> 
        //让图片居中控制图片 
        $(function() {
            var imgb = $(".pot img");
            var imgs = $(".img img");
            for(var i =0;i<imgb.length;i++){
                imgt = $(".pot img:eq("+i+")");
                if(imgt.height()<=700){
                    imgt.css("margin-top",(700-imgt.height())/2+"px");}
                else{
                    imgt.css("height","700px");
                    imgt.css("width","auto");}
            }
            for(var i =0;i<imgs.length;i++){
                imgl = $(".img img:eq("+i+")");
                if(imgl.height()<=100){
                    imgl.css("margin-top",(100-imgl.height())/2+"px");}
                else{
                    imgl.css("height","100px");
                    imgl.css("width","auto");}
            }
            //小图片点击事件滑动相对的图片
            $(".img").click(function(){
                $(".img").css("margin","0px");
                $(this).css("margin","0 10px");
                var num = $(this).index();
                numb = "-"+800*num+"px";
                var nums = 400-100*num+"px";
                $(".biglist").animate({left:numb},"slow");
                $(".smalllist").animate({left:nums},"slow");
                });
            
        }); 
  </script>
</body>
</html>
posted @ 2016-04-22 14:26 gyz418 阅读(137) 评论(0) 收藏举报
刷新页面返回顶部
gyz418

相册

公告
