一个最简单的轮播图的制作（个人小作品）

个人小作品之轮播图的制作

轮播图是一个页面中常见的特效。

本作品完整代码：点击查看本作品完整代码

首先来看看效果图：

整体来分析这个轮播图：

1、可以将这个轮播图整体看作成一个大盒子。即用一个<div>表示。

2、图片部分，图片的尺寸大小与整体盒子的尺寸大小一样，也就是说图片区域继承了整体盒子的尺寸大小，用一个<div>来装<img>。

3、因为这个轮播图的效果是不同图片的切换其后面的背景颜色也同时切换，因为需要用一个<div>来表示一个图片的背景部分。

4、按钮部分，使用定位来定义按钮的位置，切换不同的图片，其相应的按钮也切换为不同的按钮。

根据思想可以完成HTML部分的布局：

<!doctype html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <meta name="Keywords" content="轮播">
    <meta name="Description" content="轮播">
    <link rel="stylesheet" href="css/lunbo.css">
  </head>
  <body>
  
    <!-- banner start -->
    <div id="wrapper" class="wrapper">
      <div id="banner" class="banner banner-first">
        <div id="banner-box" class="banner-box">
          <img src="images/1.webp" width="1130" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner" class="banner banner-two">
        <div id="banner-box" class="banner-box">
          <img src="images/2.jpg" width="1180" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner" class="banner banner-three">
        <div id="banner-box" class="banner-box">
          <img src="images/3.jpg" width="1130" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner" class="banner banner-four">
        <div id="banner-box" class="banner-box">
          <img src="images/4.jpg" width="1180" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner" class="banner banner-five">
        <div id="banner-box" class="banner-box">
          <img src="images/5.webp" width="1130" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner" class="banner banner-six">
        <div id="banner-box" class="banner-box">
          <img src="images/6.webp" width="1130" height="500" alt="天猫发售">
        </div>
      </div>
      <div id="banner-tab" class="banner-tab">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- banner end -->
  
  <script src="script/lunbo.js"></script>
  </body>
</html>

关于<img>标签的知识：

在实际的纯文本中是不能添加图片的，<img>标签就是为图片定义一个点位符而已。

在HTML中需要写成

<img src="" width="" height="" alt="">

为什么要在HTML中写入<img>的"width"和"height"属性？

答：是为了网站性能：网站打开速度要快。加载图片时，浏览器需要加载和计算，如果告诉了浏览器图片的宽、高，那么浏览器就不需要计算图片的宽、高，这样浏览器加载速度就很快了。

"alt"属性？

答：alt属性用于告诉搜索引擎该图片的信息，利于搜索引擎抓取alt属性的值表示的图片起见名知意的功能。

CSS部分：

* {
  margin: 0;
  padding: 0;
}

/* banner start */
#wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  background: red;
}

#wrapper .banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* 这里100%，它继承了wrapper的高度，所以还是500px */
  opacity: 0;
  transition: 1s;
}


/* 轮播图背景颜色 */
#wrapper .banner-first {
  background: rgb(223, 175, 109);
}

#wrapper .banner-two {
  background: rgb(232, 232, 232);
}

#wrapper .banner-three {
  background: rgb(133, 198, 236);
}

#wrapper .banner-four {
  background: rgb(232, 232, 232);
}

#wrapper .banner-five {
  background: rgb(232, 232, 232);
}

#wrapper .banner-six{
  background: rgb(80, 113, 233);
}

#wrapper .banner .banner-box {
  width: 1230px;
  height: 100%;
  margin: 0 auto;
}


/* 按钮 */
#wrapper .banner-tab {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

#wrapper .banner-tab  span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 3px;
  background: rgba(105, 105, 105, .5);
}

#wrapper .banner-tab  span.on {
  background: #fff;
}
/* banner end */

其中，要使用图片重叠在一起，需要对图片元素使用绝对定位属性"display: absolute;"。定位：就是一个参考物与运动元素的关系。

关于banner-tab:

使用span来表示按钮，span是内联元素，为其添加display: inline-block;可以使其具有块级属性（有宽、高），内联元素具有文字属性即可以使用text-align来定义其对齐方式。

JS部分：

var aBanner = document.getElementsByClassName("banner");
var banner_box = document.getElementsByClassName("banner-box");
var aSpan = document.getElementsByClassName("banner-tab")[0].getElementsByTagName("span");

//初始化样式
aBanner[0].style.opacity = "1";
aSpan[0].className = "on";

//用于存储当前单击按钮的索引
var num = 0;
var time;

//点击轮播
for (var i = 0; i < aSpan.length; i ++) {
    aSpan[i].index = i;
    aSpan[i].onclick = function () {
        for (var j = 0; j < aSpan.length; j ++) {
            num = this.index;
            aSpan[j].className = "";
            aBanner[j].style.opacity = "0";
        }
        
        aSpan[num].className = "on";
        aBanner[num].style.opacity = "1";
    };
}

//定时轮播
time = setInterval(function () {   
    num++;
    num %= aBanner.length;
    for (var j = 0; j < aSpan.length; j ++) {
        aSpan[j].className = "";
        aBanner[j].style.opacity = "0";
    }
        
    aSpan[num].className = "on";
    aBanner[num].style.opacity = "1";
}, 2000);

要使图片切换为淡入淡出的效果，可以使用opacity属性(透明度)来实现，并和transition（规定切换所需要的时间）属性一起使用。

关于企业规范：

1、模块化开发：页面中，缺少的一部分不会影响页面的另一部分内容。独立。

2、注释

3、要使网站打开速度快：

a、减少http请求次数，例如：将多个小图片合成一个图片，这样只向服务器请求一次就行了（已经存储在缓存器里）。

b、减少代码体积，减少不必要的注释和字符串（小于1的小数省略0只写小数点和小数点后面的数字，颜色如：#cccccc 写成：#ccc）