图片轮播

1、创建一个名为“banner”的盒子

 <div class="banner">

 div>

盒子样式如下：

.banner{
  height: 382px;
  width: 100%;
  overflow: hidden;
}

banner设置overflow:hidden的溢出隐藏属性，将子元素超出父级宽度部分隐藏掉
2、创建一个“banner-img”的小箱子用来写轮播图片，图片用a包裹图片srcz中输入图片路径或者网址

  <div class="banner-img">
        <a href="" class="show">
           <img src="img/2.jpg" alt="">
         a>
         <a href="" style="display: none;">
             <img src="img/2.jpg" alt="">
         a>
         <a href="" style="display: none;">
             <img src="img/2.jpg" alt="">
         a>
   div>

将第一个图片设置为显示其他图片为隐藏，呈现在我们面前的就是一张高度为382的全屏图片
写到这里图片区域就完成了接下来编写指示灯

3、写一个banner-center的小箱子定位在图片区域中间，用来盛放指示灯 是banner的子元素

   <div class="banner-center">

   div>

banner-center样式：宽度1000px,高度与父级相同，应用相对父级banner绝对定位属性来定位，最后给自己添加绝对定位属性top：0, left：50%, 向左偏移自身宽度的一半使自己的中心与父级中心重合。

.banner{
  height: 382px;
  width: 100%;
  overflow: hidden;
  position: relative;
  }
  .banner-center{
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -500px;
    }

在banner-center中编写指示灯

 <div class="banner-center">
   <div class="banner-dot">
       <span class="dot active">span>
       <span class="dot">span>
       <span class="dot">span>
   div>
 div>

banner-dot采用相对于banner-center绝对定位的方式确定位置

.banner-dot{
    position: absolute;
     bottom: 20px;
     left: 50%;
 }

指示灯样式如下：

 .dot{
   width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 100%;
    display: inline-block;
     &.active{
          background-color: #b0b0b0;
        }
 }

注：由于span是内联元素宽高不生效需要变为内联块儿元素
html部分到这就写完了，接下来是js部分
5、由于轮播图片区域不是居中显示，使用js让图片居中

 var win = $(document.body).width();
 var diff = (3000 - win)/2;
 $('.banner-img img').css('margin-left'.diff +'px');

计时器用来切换图片与圆点

 var timer = setInterval(function(){
     /*图片*/
    var showing = $('.banner-img .show');
     showing.removeClass('show').fadeOut(200);
     var needShow = showing.next();
     if(needShow.length == 0 ){
         needShow = $('.banner-img a').eq(0);
     }
    needShow.addClass('show').fadeIn(200);
    /*圆点*/
    var cur= $('.banner-dot .active');
     cur.removeClass('active');
     var nextShow = cur.next();
     if(nextShow.length == 0 ){
         nextShow = $('.banner-dot .dot').eq(0);
     }
    nextShow.addClass('active');
 },3000);

整个轮播到这里就写完了