jQuery实现视差滚动轮播代码解析之 HTML+CSS

系列

jQuery实现视差滚动轮播代码解析之 JavaScript

一、前言

本篇文章需要有一定的HTML+CSS基础，以及掌握JS基本语法。以这个作为web前端入门学习的很好的一个项目为切入点，逐行地分析每一段代码，并分享我目前掌握的web前端的些许心得，供大家共同探讨。对于web前端，目前我也是入门级别，若您对本篇文章内容有任何疑问或建议，望及时提出，谢谢！！！。

二、项目效果

效果图

三、分析需求

针对上面的项目效果图，我们做一下全面的需求分析。
首先，此页面可以大致分为两个部分，即标题部分、轮播部分。

1. 标题部分很简单，可以使用一个块级标签h1标签即可。
2. 轮播部分内容比较丰富多变，我们逐次进行分解解析：

• 最底层的是背景模块
• 在页面图片加载完成前，会在背景模块上有个加载框模块
• 与加载框的同级模块（一个隐藏，另一个现实），及轮播的主题内容模块又可分为下面3个部分：
  轮播大图部分、前置后置引导、缩略图部分

四、HTML代码搭建与CSS样式实现

注：具体代码说明，请阅读代码注释。

1. 首先先将最外层两大基本模块，搭建出来。HTML代码如下：

        
jQuery实现个性轮播图

根据其对应的选择器，设置两大模块css样式。CSS代码如下：

/*common 设置项目中全局标签样式*/
*{
    margin: 0px;
    padding: 0px;
}

h1{
    font-size: 56px;
    color: #ccc;
}

.title{
    /*设置文本内容居中*/
    text-align: center;
    /*设置标签上下间距，并左右居中显示*/
    margin: 100px auto 20px;
}

/*banner*/
#banner{
    /*宽度为占满屏幕*/
    width: 100%;
    height: 420px;
    /*顶部边框样式*/
    border-top: 7px solid yellow;
    /*底部边框样式*/
    border-bottom: 7px solid yellow;
    /*上下、左右的阴影设置*/
    box-shadow: 0px 0px 7px black;
   /*因为轮播部分内容丰富，所以设置其子标签绝对定位*/ 
    position: relative;
    /*设置轮播部分超出部分进行裁剪，不进行滚动显示*/
    overflow-x: hidden;
}

2. 轮播部分之背景模块

其背景模块，是由一个背景框，里面包含三张背景图片组成。HTML代码如下：

        
        

            

            

            

        
        
...

背景模块CSS代码如下：

/*bannerBg*/
.bannerBg{
    /*背景模块边框图片*/
    background: url("../images/bg.png") repeat;
}

.bannerBg div{
    /*背景模块里的图片使用绝对定位*/
    position:absolute;
    /*绝对定位top,left*/
    top:0px;
    left:0px;
    /*设置宽高,高度与轮播部分一致*/
    width:100%;
    height:420px;
}

.bannerBg01{
    /*背景模块里第一张图片资源*/
    background: url("../images/bg1.png");
}

.bannerBg02{
     /*背景模块里第二张图片资源*/
    background: url("../images/bg2.png");
}

.bannerBg03{
     /*背景模块里第三张图片资源*/
    background: url("../images/bg3.png");
}
/*bannerBg结束*/

3. 轮播部分之加载框模块

效果图上没有展示出加载框，因为图片都已经加载完成。下面我截取一张加载框图片样式如下：

image.png

比较简单，我们有很多种实现方案，下面为最简洁的一种。直接就一个div标签，转动的圈圈可以设为其background，结合使用精灵图定位的方法设置其位置，文字即为div标签的内容。
HTML代码如下：

...

加载图片中...
...

CSS代码如下：

/*loading*/
.banner_loading{
    /*设置标签内容文字颜色*/
    color: #FFFFFF;
    /*设置标签内容文字大小*/
    font-size: 20px;
    /*设置标签内容上下左右内边距，因左边有转圈图，所以我们给左边预留50px间距*/
    padding: 15px 15px 15px 50px;
    /*设置标签背景，并使用精灵图定位。左边距离10px，上下50%居中*/
    background: url("../images/ajax-loader.gif") no-repeat 10px 50%;
    /*设置加载框标签宽度*/
    width: 180px;
   /*使用绝对定位，并设置其距离相对定位标签的top，left值*/
    position: absolute;
    top: 150px;
    left: 50%;
    /*调整其左间距，配合其宽度。使加载框左右居中*/
    margin-left: -90px;
}
/*loading结束*/

4. 轮播部分之轮播主体模块

轮播主体在需求分析时，已经划分了三个子模块：

• 轮播大图模块，其有多个图片组成，所以很适合使用无序ul标签。HTML代码如下:

       
       

                

                

                

                

                

                

        
        
        ...

CSS代码：

/*轮播主体模块*/
.banner_content{
    /*图片加载完成前，先显示加载框，所以先将轮播主体隐藏*/
    display: none;
}

.banner_content ul{
    /*设置轮播大图ul标签样式*/
    list-style: none;
    /*这里设置绝对定位，为以后点击前置后置滚动，刷新其left值做基础*/
    position: absolute;
}

ul.banner_images li{
    /*设置li标签左浮动，将块级li标签变成行内块级*/
    float: left;
    /*设置行内块级li标签高度*/
    height: 420px;
}

ul.banner_images li img{
    /*将img标签由行内块级标签变成块级标签，这样通过外间距可设置其相对于父标签水平居中*/
    display: block;
    margin: 30px auto 0px;
    /*设置其阴影样式*/
    box-shadow: 0px 0px 7px #222;
    /*设置边框样式，transparent为透明色*/
    border: 8px solid transparent;
    /*设置圆角*/
    border-radius: 4px;
}

• 轮播前置后置引导
  前置后置引导即两个左右箭头，点击可对图片进行轮播转换。HTML代码如下：

...



        
        


...

CSS代码如下：

.bannerGuide span{
    /*设置前置后置为绝对定位，并赋值top值*/
    position: absolute;
    top: 145px;
    /*设置绝对定位后，行内标签span变为行内块级标签，所以要设置其width，height*/
    width: 30px;
    height: 60px;
    /*设置阴影样式*/
    box-shadow: 0px 0px 7px yellow;
    /*设置其透明度*/
    /*opacity: 0.6;*/
    /*设置圆角*/
    border-radius: 4px;
    /*光标为一只手的样式*/
    cursor:pointer;
}

.bannerGuide span:hover{
    /*设置前置后置伪类样式，更改透明度*/
    opacity: 0.9;
}

.bannerGuide span.bannerGuide_last{
    /*对应设置前置背景图片，并将其背景颜色设为黑色*/
    background: #000 url("../images/prev.png") no-repeat center center;
}

.bannerGuide span.bannerGuide_next{
    /*对应设置后置背景图片，并将其背景颜色设为黑色*/
    background: #000 url("../images/next.png") no-repeat center center;
}

• 轮播缩略图模块。其和轮播大图一样，是多个图片的集合。区别是样式不同，且拥有点击时间

...



        

        

        

        

        

        


...

CSS代码如下：

ul.banner_thumbnails{
    /*设置缩略图无序ul标签为绝对定位，并设置top，left值*/
    position: absolute;
    top: 320px;
    left: 50%;
    /*设置其高度*/
    height: 35px;
}

ul.banner_thumbnails li{
    /*设置li标签为绝对定位，为以后js设置每个li标签的left做基础*/
    position: absolute;
}

ul.banner_thumbnails li img{
    /*设置缩略图片的边框样式*/
    border: 5px solid #FFFFFF;
    /*设置缩略图片的阴影样式*/
    box-shadow: 0px 0px 7px red;
    /*光标为一只手的样式*/
    cursor: pointer;
    /*设置透明度*/
    opacity: 0.7;
}

ul.banner_thumbnails li.selected img{
    /*设置li标签为selected类选择器时透明度值，方便以后js可以重置selected标签*/
    opacity: 0.9;
}

五、分析HTML+CSS完成的进度与JS要完成的使命

坐完上面的需求，HTML+CSS大致已经完成了其使命。接下来其不能实现的逻辑需要JS完成了。
那么JS需要完成哪些功能呢，我们先分析一下。

• 图片加载完成后，隐藏加载框，显示轮播模块。
• 目前轮播大图容器ul标签下的li标签为左浮动，且设置了其高度。但是需求是每个li标签都是在同一水平线上的，这样才能实现水平动画滚动效果。所以我们要使用js根据图片数据，重新计算ul标签的宽度。
  因为ul的父标签设置了overflow-x为hidden，所以不用担心ul超出屏幕宽度能够水平滚动
• 目前缩略图容器ul标签下的li标签为绝对定位，但是并没有设置其定位值，所以目前默认的缩略图应该是重叠的。所以我们要利用js根据缩略图数量，计算其绝对定位置。
• 缩略图片有个随机的角度偏移。
• 点击前置后置后，动画切换大图，并更改缩略图选择样式。
• 点击缩略图，动画切换大图，并更改缩略图选择样式。
• 光标放到缩略图与离开缩略图有个动画效果。
  以上七点就是分析出来的JS要完成的事情，下一章我们使用jQuery框架对这七点如何实现，逐一进行讲解。敬请期待

对了，忘了最重要的~这是Demo