开发者学堂课程【移动 Web 前端开发：首页—轮播图 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8406
首页—轮播图
一、轮播图介绍
1、移动端达到轮播图的无缝滚动有什么特殊要求呢？
移动端可能出现上一张下一张的情况，并且是滑动切换，无缝滚动是要在后面接一张，向左滑到头之后瞬间定位到第一张，如果用户从开始就向右滑，空白就会出来，在左边再加一张就可以了，这样就形成了无缝的滚动加滑动，滑动有两个方向的，滚动加一张图没有问题，但是滑动是有反方向的，在头部也要加一张。
2、现在的轮播图有8张图片，要形成一个无缝的滚动和滑动，需要10张图，首尾加一张。
3、在 index.html 中， banner 位置， banner 现在有两个区域块，一个是轮播图盒子，一个是点盒子，结构建起来。每一张轮播图都有 a 能点击，点击可以看到别的页面， a 包裹着 images/l1.jpg，这是第一张轮播图。为了达到无缝的滑动和滚动，首尾要加一张。
<div class="jd_ banner">
<ul >
<li><a href="#">(imgIsrc="images/l8.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l1.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l2.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l3.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l4.jpg" alt=""/></a>/li><li><a href="#">(imgIsrc="images/l5.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l6.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l7.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l8.jpg" alt=""/></a>/li>
<li><a href="#">(imgIsrc="images/l1.jpg" alt=""/></a>/li>
<ul>
这是图片格子。
还有点格子。
<ul>
<liI class=”now”></li>第一个是默认显示的，当前被选中的。
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
4、进入 index.css，banner 里面有一个图片格子，但是它应该是first-child，图片格子里面有 a，a 里面有 img，第二个 ul 就是点盒子，点盒子里有 li，li 里面有当前样子。选择器就齐了。
/*轮播图*/
.jd_ banner{ }
.jd_ banner ul:first- child{}
.jd_ banner ul:first-child li{}
.jd_ banner ul:first-child li a{}
.jd_ banner ul:first-child li a img{}
.jd_ banner ul:last- child{}
.jd_ banner ul:last-child li{}
.jd_ banner ul:last-child li. now {}
再进行轮播图宽100%，要装10张图，就是10倍宽，就是1000%，每个li宽10%，里面的 a 宽100%，a里面的 img 宽100%，再变成一排，第8张图到第1张图到第8张图，要把第1张图放在前面，进行位移，加一个-webkit 因为 transform 是非兼容属性，为了让它保证在更多版本浏览器里面兼容，加一个前缀，这样写的代码，适配的浏览器会更多。点盒子要定位到最下面。
. jd_ banner{
width: 100%;
position：relative；
Overliow：hidden；
}
.jd_ banner ul : first-child{
width: 1000%;
transform：translatex（-10%）；
-webkit-transform：translatex（-10%）；
.jd_ banner ul:first-child li{
width: 10%;
float：left；
}
.jd_ banner ul:first-child li a{
width: 100%;
display: block;
}
.jd_ banner ul:first-child li a img{
width :100%;
display: block;
}
.jd_ banner ul: last-child{
position：absolute；
Bottom:8px;
Left:50%;
Margin-left:-59px;
width:118px;
}
.jd_ banner ul :last-child li{
width: 6px; 宽6px
height: 6px; 高6px
border-radius: 3px;
border :1px solid #fff; 源头
float: left; 在一块显示
margin-left: 10px; 10px的间距
}
.jd_ banner ul :last-child li:first-child{
margin-left: 0;
}
.jd_ banner ul:last-child li. Now{
Background:#fff;
}
/*顶部搜索*/
.jd_ search{
/*基准是浏览器的宽度*/
position: fixed;
left: 0;
top: 0;
Width:100%;
z-index: 999;
}
.jd_ search .jd_ search_ box{
width: 100%;
height: 40px;
max -width: 640pх;
min-width: 320px;
margin: 0 auto;
background: #d8505c;
position: relative;
}
进行刷新，这时候居中，里面所有的元素加起来118，当前默认的是 now。
