系列
jQuery实现视差滚动轮播代码解析之 JavaScript
一、前言
本篇文章需要有一定的HTML+CSS基础，以及掌握JS基本语法。以这个作为web前端入门学习的很好的一个项目为切入点，逐行地分析每一段代码，并分享我目前掌握的web前端的些许心得，供大家共同探讨。对于web前端，目前我也是入门级别，若您对本篇文章内容有任何疑问或建议，望及时提出，谢谢！！！。
二、项目效果
效果图
三、分析需求
针对上面的项目效果图，我们做一下全面的需求分析。
首先，此页面可以大致分为两个部分，即标题部分、轮播部分。
- 标题部分很简单，可以使用一个块级标签h1标签即可。
- 轮播部分内容比较丰富多变，我们逐次进行分解解析：
- 最底层的是背景模块
- 在页面图片加载完成前，会在背景模块上有个加载框模块
- 与加载框的同级模块（一个隐藏，另一个现实），及轮播的主题内容模块又可分为下面3个部分：
轮播大图部分、前置后置引导、缩略图部分
四、HTML代码搭建与CSS样式实现
注：具体代码说明，请阅读代码注释。
1. 首先先将最外层两大基本模块，搭建出来。HTML代码如下：
<!--上部分-->
<div class="title">
<h1>jQuery实现个性轮播图</h1>
</div>
<!--上部分结束-->
<!--轮播部分-->
<div id="banner">
</div>
<!--轮播部分结束-->
根据其对应的选择器，设置两大模块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代码如下：
<!--轮播部分-->
<div id="banner">
<!--bannerBg-->
<div class="bannerBg">
<div class="bannerBg01"></div>
<div class="bannerBg02"></div>
<div class="bannerBg03"></div>
</div>
<!--bannerBg结束-->
...
背景模块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代码如下：
...
<!--bannerBg结束-->
<div class="banner_loading">加载图片中...</div>
...
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代码如下:
<!--轮播主体模块-->
<div class="banner_content">
<!--轮播大图模块-->
<ul class="banner_images">
<li><img src="images/1.jpg" alt="第一张图片"></li>
<li><img src="images/2.jpg" alt="第二张图片"></li>
<li><img src="images/3.jpg" alt="第三张图片"></li>
<li><img src="images/4.jpg" alt="第四张图片"></li>
<li><img src="images/5.jpg" alt="第五张图片"></li>
<li><img src="images/6.jpg" alt="第六张图片"></li>
</ul>
<!--轮播大图模块结束-->
...
</div>
<!--轮播主体模块结束-->
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代码如下：
...
<!--轮播大图模块结束-->
<!--前置后置引导模块-->
<div class="bannerGuide">
<span class="bannerGuide_last"></span>
<span class="bannerGuide_next"></span>
</div>
<!--前置后置引导模块结束-->
...
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;
}
- 轮播缩略图模块。其和轮播大图一样，是多个图片的集合。区别是样式不同，且拥有点击时间
...
<!--轮播前置后置模块结束-->
<!--轮播缩略图模块-->
<ul class="banner_thumbnails">
<li><img src="images/thumbs/1.jpg" alt="第一张图片"></li>
<li><img src="images/thumbs/2.jpg" alt="第二张图片"></li>
<li><img src="images/thumbs/3.jpg" alt="第三张图片"></li>
<li><img src="images/thumbs/4.jpg" alt="第四张图片"></li>
<li><img src="images/thumbs/5.jpg" alt="第五张图片"></li>
<li><img src="images/thumbs/6.jpg" alt="第六张图片"></li
</ul>
<!--轮播缩略图模块结束-->
...
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
网友评论