跨时空的相遇~为她制作一个专属的QQ空间相册（附源代码）

目录

一、实现的功能和展示

二、前期准备 

 三、源代码

QQ空间.html

 QQ空间.css

 QQ空间.js

---

一、实现的功能和展示

• 点击某个图片的时候，图片放大
• 实现图片的切换，当我们在第一张继续往左边点击的时候就会提示你这已经是第一张了，最后一张也是同样的效果

注意：此次制作的是一个简易的QQ空间相册，其中主要是提供一个制作QQ空间的思路和学习更多有关于JavaScript和jQurey的操作。

 

•  当在第一张照片或最后一张照片的位置继续向左或向右点击图片切换按钮时，会弹出提示框

---

二、前期准备 

1、任意9张照片（如果想增多照片的话可以再添加一个ul标签，同时还要修改一些功能，这就需要大家更加深入的去学习了） ，其中7张照片放在相册内，1张照片用来做头像，另一张用来做背景

2、两个切换按钮图片和QQ空间log图片（以下是博主提供的照片，也可以自己去找喜欢的图片用做切换按钮哦~）

3、创建好一个文件夹，并在这个文件夹里分别创建一个css文件夹，image文件夹，js文件夹和QQ空间.html文件

• css文件夹内创建一个QQ空间.css文件
• image文件夹中放入我们准备的所有图片
• js文件夹中放入jQuery的文件（如果不知道如何放入jQuery中文件可参考这篇文章：jQuery的安装和基本使用）和创建一个QQ空间.js文件
• QQ空间.html文件用来写入QQ空间页面的内容

例：

---

 三、源代码

QQ空间.html

    
    
    
    
    
    
    
    
    


    
    

        
        

            
            
            

                
QQ空间
                
个人中心
                
我的主页
                
好友
                
游戏
                
装扮
            
        
        
        

            

            
            
            

                
                
                

                    
主页
                    
日志
                    
相册
                    
留言板
                    
说说
                    
个人档
                    
音乐
                    
更多
                
            
        
        
        

            
相册
            
            

                
                

                    
                    
2021/1/8
                

                    
                    
2021/1/9
                
                

                    
                    
2021/1/10
                
                

                    
                    
2021/1/11
                
                

                    
                    
2021/1/11
                
                

                    
                    
2021/1/11
                
                

                    
                    
2021/1/11
                
            
        
    

 QQ空间.css

/* *所有外边距内边距都为0 */
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 50px;
    background-color: black;
    /*写在父级，直系子级在同一水平线上*/
    display: flex;
}
.header .logo{
    width: 35px;
    /*auto是适配宽度，不让图片变形*/
    height: auto;
    /*上下 左右*/
    margin: 8px 0;
    padding-left: 5%;
}
.header li{
    color: white;
    float: left;
    /*去掉列表的小圆点*/
    list-style: none;
    margin: 16px 0;
    padding-left: 50px;
    /*padding-right: 50px;*/
}
/*指定第一个元素样式 括号里面的内容是从1开始的 nth-child(1)伪类:*/
.header li:nth-child(1){
    padding-left: 0;
}
.bg-content{
    /*相对定位，一般写在父级元素上*/
    position: relative;
    height: 265px;
}
.bg-content .bg{
    /*背景图片*/
    width: 100%;
    height: 230px;
    /*默认铺满宽度*/
    background-image: url("../image/bj1.png");
}
.info{
    display: flex;
    /*绝对定位，一般写在子级元素上面*/
    margin-left: 7%;
}
.info li{
    float: left;
    list-style: none;
    margin-left: 20px;
}
.info .logo{
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 0;
}
.info ul{
    /*上右下左*/
    margin: 10px 0 0 120px;
}
.qqContent{
    width: 90%;
    height: 700px;
    background-color: #f2f2f2;
    margin: 15px 5% 0 5%;
}
.qqContent .title{
    padding: 15px 0 0 6%;
}
.qqContent li{
    list-style: none;
    background-color: #353a54;
    width: 179px;
    float: left;
    margin: 1% 0 0 1%;
}
.qqContent .imgs{
    width: 179px;
    height: 128px;
}
.qqContent .date{
    color: #ccc7d9;
    width: 179px;
    text-align: center;
}

 QQ空间.js

// 功能：
// 1.点击某个图片的时候，图片放大
// 2.实现图片的切换，当我们在第一张继续往左边点击的时候就会提示你这已经是第一张了，最后一张也是同样的效果
// 思路：1.添加盒子，在点击某个图片的时候把图片添加到盒子中去
// 思考：怎样知道点击是哪张图片
// 把图片添加到盒子中去
// 2.图片切换，判断是第一张图片或者是最后一张图片
// 替换图片
//1.通过jquery的方式 加载dom文档
$(function () {
    //添加一个盒子（元素）before(添加在指定元素的外面的前面) append（添加到指定元素的里面）
    $(".qqContent .image_list").before("
");
    $(".div_photo").css({"text-align":"center","position":"relative"})
    //点击
    $(".image_list .imgs").click(function () {
        //需要知道点击的是哪张图片 this = .image_list .imgs
        //attr()如果只写了一个参数那么就是获取属性，如果写了两个参数，那么就是修改属性
        var url = $(this).attr("src");
        $(".div_photo").append('
' +
            '' +
            '' + // src = url不可以的
            '' +
            '
');
        //设置左右按钮图片大小
        $(".changePhoto").css({"width":"50px","height":"auto"});
        //设置图片的大小
        $(".photos").css({"width":"500px","height":"342px"});
        //左右按钮定位在div_photo
        $(".left").css({"position":"absolute","top":"150px","left":"310px"});
        $(".right").css({"position":"absolute","top":"150px","right":"310px"});
        //点击会不断图片，把之前的图片都隐藏掉 prevAll() 之前的同级元素
        $(".photo-content").prevAll().hide();
        //通过正则表达式去匹配图片 第一个图片 下标1 返回的是一个数组
        // /正则表达式的主体/  image/1.jpg \转义字符 （）包含字符 \S匹配任何空白字符 *匹配0次或者多次
        var imgs = url.match(/image\/(\S*)\./);
        var index = imgs[1];
        $(".left").click(function () {
            if(index == 1){
                alert("这已经是第一张图片了");
            }else{
                index--;
                $(".photos").attr("src","image/"+index+".jpg")
            }
        })
        $(".right").click(function () {
            if(index == 7){
                alert("这已经是最后一张图片了");
            }else{
                index++;
                $(".photos").attr("src","image/"+index+".jpg")
            }
        })

    })

})