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

这里写图片描述

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值