【京东商城首页实战11】制作轮播图

上一节咱们添加了通栏背景并了解了布局思路，下面就开始做轮播图啦！

附上轮播图图片：

分析：

• 1.轮播图左右切换按钮和轮播序号都显示在图片上，所以可以利用定位来做。
• 2.轮播序号是一个盒子里，左浮动对的li标签。相当于是微型菜单栏。

先看一下HTML代码：

<div class="banner clearfix"><!--banner是通栏大盒子-->  <a href="#" class="bg"></a>  <!--因为banner盒子里不止一个a标签，为了防止继承给其他a标签，这里给a标签加个类名-->  <div class="w main">  <!--引入版心w,main类负责是轮播图和右侧部分的父盒子-->     <div class="slider">     <!--轮播图大盒子-->        <a href="#" ><img src="images/slider1.jpg" alt=""/></a>        <!--插入图片-->        <ul class="circle">        <!-- 小圆点-->           <li class="current">1</li>           <!--当前小圆点，-->           <li>2</li>           <li>3</li>           <li>4</li>           <li>5</li>           <li>6</li>         </ul>         <div class="arrow">   <!--左右两个三角-->            <a href="javascript:;" class="arrow-l"><</a>            <!--点击事件，后期可用js左交互-->            <a href="javascript:;" class="arrow-r">></a>         </div>      </div>      <div class="news">这是右边的部分，先放着撑布局</div>   </div></div>

CSS代码：

.banner {    position: relative;}.banner .bg {    /*因为后面还有a标签，为了防止继承给其他a标签，这里给a标签加个类名*/    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 604px;    background: url(../images/banner.jpg) no-repeat top center;}.main{    position: relative;}.slider {    width: 730px;    height: 453px;    /*background-color: pink;*/    margin: 12px 0 0  220px;    float: left;    position: relative;    /*圆点和切换按钮的父亲盒子相对定位*/}  /*效果1*/.circle {    position: absolute;    /*原点绝对定位*/    bottom:8px;    left: 50%;    margin-left: -66px;    /*再向左移动自身的一半*/}.circle li {    width: 18px;    height: 18px;    /*设置li盒子的宽高，它是个正方形*/    border-radius: 50%;    /*设置圆角50%，可以使一个正方形变成圆形*/    background-color: #3E3E3E;      /*效果2*/    float: left;    /*li左浮动，使其并排排列*/    text-align: center;    /*文本对齐方式：居中*/    line-height: 18px;    /*设置行高等于盒子高，文本垂直居中*/    color: #fff;    margin: 0 2px;    /*每个li之间有2px的间距*/    cursor: pointer;    /*当鼠标经过原点时，变成小手*/} .circle li.current {    background-color: #B61B1F;    /*设置当前li的背景颜色，当li带这个类的时候，背景颜色改变*/}/*效果3*/.arrow-l, .arrow-r {    /*左右两个按钮有共同的属性*/    position: absolute;    /*相对于slider盒子，进行绝对定位*/    width: 28px;    height: 62px;    /*设置按钮的大小*/    top: 50%;    /*定位到垂直方向正中间。*/    margin-top: -31px;    /*定位是以盒子左上角为基点的，所以当top设置50%时，    意思是盒子上边离相对的盒子上边一半的距离。所以需要再往上移动半个自身高度*/    color: #fff;    font: 500 18px/62px "宋体";    text-align: center;    background: rgba(0,0,0,.2);    /*透明度设置 “.2”意思是0.2*/}/*效果4*/.arrow-l {    left: 0;    /*两个按钮唯一不同之处就是位置不同，一个靠左一个靠右，需要单独设置*/}.arrow-r {    right: 0;}.arrow-l:hover,.arrow-r:hover {    background: rgba(0,0,0,.4);    /*当鼠标悬浮在两个按钮上时，颜色变深。字体颜色变化*/    color: #fff;}

效果1：

这一步图片已经成功添加上了，小圆点和左右按钮还是最初模样。

效果2：

至此，小圆点已出具模型，里面的文本和小圆点之间的间距需要再调整一下。

效果3：

小圆点已经完成了。当点击小圆点时，当前小圆点的背景颜色会变成红色，这个需要用JS来实现。咱们就先做静态的页面。

效果4：

这一步已经给两个按钮设置好样式，但是还没有定位。

效果5：

至此，两边的按钮也制作完毕，当鼠标经过按钮时，按钮的颜色会变深。
欢迎指正，谢谢！