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

程序员文章站 2024-02-26 12:40:22

...

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

附上轮播图图片：

【京东商城首页实战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;
}