原生JS实现轮播图--第一章图片展现

时间 2019-11-16

原文原文链接

首先实现一个功能时，要从总体考虑，将大功能分解为多个小功能，在轮播图的实现中，首先最直观的，是展现出来的和未展现出来的足多张图片、可点击的多个按钮和底部提示圆点，这三部分；其次是在不进行任何操做的状况下，图片会自动朝一个方向循环滚动；最后是点击不一样的按钮，图片会朝不一样的方向滚动。css

注：本实例使用VSCode进行编程，Chrome浏览器演示效果。html

本篇文章主要讲解轮播图制做的第一步——静态页面的图片展现，后续会继续发布用原生JS实现功能的部分。编程

图片展现

首先从直观视觉上看，有一张展现出来的图和隐藏看不见的多张图、左右两个箭头、以及底部的多个提示圆点。例以下图：浏览器

这里咱们插入三张图，两个箭头和底部三个提示圆点。less

首先是基本的HTML代码，以下：优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static show</title>
</head>

<body>
    <div class="showContainer">
        <div class="container">     //包含全部图片的容器
            <img src="../images/cat.jpg" alt="A cat">
            <img src="../images/dog1.jpg" alt="A dog">
            <img src="../images/dandelion.jpg" alt="dandelion">
        </div>

        <div class="dots">      //底部的提示圆点
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>

        <div class="left-triangle">     //向左箭头
            <img src="../images/triangle.png" alt="指向左边的箭头">
        </div>
        <div class="right-triangle">        //向右箭头
            <img src="../images/triangle.png" alt="指向右边的箭头">
        </div>
    </div>
</body>

</html>
复制代码

结果如图：动画

此时没有添加任何样式，图片大小不一，因此展现出来的有大有小；底部提示圆点此时还只是一个空的行内元素，不显示；左右箭头，我用了一张背景色是透明的，线条颜色为白色的图片代替，白色背景下的白色图片固然看不见了。如今咱们给一个灰色的背景色 background: #aaa;，再来效果：ui

看红色箭头指向的地方就是我加载的，那两张同样的图。可是，这两个箭头可不是我想要的样子，如今就让transform属性来发挥它的力量吧！去这里developer.mozilla.org/zh-CN/docs/…看看transform到底是怎么回事儿吧！咱们如今只使用它的基本的旋转功能。spa

transform: rotate(-90deg);  //逆时针旋转90°
transform: rotate(90deg);   //顺时针旋转90°
复制代码

效来看看效果：插件

哇！左右两个箭头也变出来了哦！可是，别忘了，咱们要的底部的提示圆点还在躲猫猫呢，那要怎么把它们找出来呢？那就要须要给他一套新的装备了。

咱们在给提示圆点换装备以前，要先给他们把工做区搭建好，先把整体样式显示效果固定了。为了方便观察，我将展现区在浏览器窗口中居中显示，并设置其宽高。

.showContainer{
    width: 356px;
    height: 200px;
    border: 10px solid maroon;         
    background-color: #AAA;             
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}
复制代码

由于包含图片的容器container要根据其父元素showContainer来定位，因此须要设置其父元素position属性为relative,关于元素定位，请点击developer.mozilla.org/zh-CN/docs/…查看详情。由于展现区每次只须要展现区显示一张图便可，其余图片应该隐藏，利用overflow: hidden;实现隐藏。

效果以下：

再利用定位元素将图片放在展现区中，且要设置图片大小。

.container {
    width: 9999px;
    position: absolute;
    left: 0px;
}

.container > img {
    display: block;
    float: left;
    height: 200px;
}
复制代码

其中container的宽度设置为9999px是为了能够放下多张图片；container中的img元素只须要设置heihgt便可，图片会根据容器大小自适应展现。

注意：为方便展现，此处采用了宽高比一致的图片，只设置`height`，图片会根据自身的宽高比获得一样的`width`，并且此处图片容器`showContainer`宽高设置的刚好与图片相适应，因此这里的图片自适应，是指图片大小正好与我设置的容器大小吻合，并不是图片随意试应于任何容器（这种可能会出现，图片被拉伸的状况）。

如今的效果为：

对了咱们好不容易变出来的左右箭头还再也不展现区里呢，一样利用元素定位，将左右箭头分别居中放在展现区的两边：

.left-triangle {
    position: absolute;
    top: 80px;
    cursor: pointer;
    left: 0;
    transform: rotate(90deg);
}

.right-triangle {
    position: absolute;
    top: 80px;
    cursor: pointer;
    right: 0;
    transform: rotate(-90deg);
}
复制代码

效果以下：

在这里咱们能够多加一个小小的动画效果：当鼠标移动到展现区里面时，左右箭头就显示出来；当鼠标移出展现区的时候，左右箭头就消失不见。利用:hover伪类模拟鼠标悬停效果：

/*初始状态时，左右箭头是隐藏的*/
.left-triangle, .right-triangle {
    display: none;
}
.showContainer:hover .left-triangle, {
    display: block;
}
.showContainer:hover .right-triangle {
    display: block;
}
复制代码

好了如今提示圆点的工做区已经搭建好了，如今要给提示圆点一套新的装备了：

首先，固定包好提示圆点的容器dots的位置：

.dots{
    width: inherit;
    position: absolute;
    bottom: 10px;
    text-align: center;
}
复制代码

其宽度继承其父元素showContainer的宽度，可随父元素的大小变化而变化。

设置提示圆点的样式：

.dots .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: orange;
    margin-right: 10px;
}
复制代码

由于span元素时行内元素，只有在设置其display为block或者inline-block后才可设置其宽高，利用border-radius实现圆角。效果以下图：

此时鼠标悬停在展现区中。

好了，到此为止，全部静态展现出来的东西都已经大功告成啦！

代码优化

为了提醒用户左右箭头和提示圆点都是能够进行点击的，当鼠标移动到这些图标上面时，鼠标箭头变成小手装：

cursor: pointer;
复制代码

将CSS代码用.css文件引用到.html文件中;

<link rel="stylesheet" href="../styles/demo1.css">
复制代码

将复用的样式代码提出来，做为公用的样式；
改变一下边框和圆点颜色等。

最终代码以下：

HTML代码以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static show</title>
    <link rel="stylesheet" href="../styles/demo1.css">
</head>

<body>
    <div class="showContainer">
        <div class="container">
            <img src="../images/cat.jpg" alt="A cat">
            <img src="../images/dog1.jpg" alt="A dog">
            <img src="../images/dandelion.jpg" alt="dandelion">
        </div>

        <div class="dots">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <!--增长triangle类方便设置样式-->
        <div class="left-triangle triangle">
            <img src="../images/triangle.png" alt="指向左边的箭头">
        </div>
        <div class="right-triangle triangle">
            <img src="../images/triangle.png" alt="指向右边的箭头">
        </div>
    </div>
</body>

</html>
复制代码

CSS代码以下：

.showContainer {
    width: 356px;
    height: 200px;
    border: 10px solid #f5bebe;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.container {
    width: 9999px;
    position: absolute;
    left: 0px;
}

.container>img {
    display: block;
    float: left;
    height: 200px;
}
.triangle{
    position: absolute;
    top: 80px;
    cursor: pointer;
    display: none;
    cursor: pointer;
}
.left-triangle {
    left: 0;
    transform: rotate(90deg);
}

.right-triangle {
    right: 0;
    transform: rotate(-90deg);
}

.showContainer:hover .triangle{
    display: block;
}
.dots{
    width: inherit;
    position: absolute;
    bottom: 10px;
    text-align: center;
}
.dots > .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #87837e;
    margin-right: 10px;
    cursor: pointer;
}
复制代码

为了显示更加明显的层级关系，改用less，使用VSCode插件——Easy Less，可在.less文件保的同时生成.css文件，本实例中，.less文件转换的.css文件与上述彻底相同。

Less代码以下：

.showContainer {
    width: 356px;
    height: 200px;
    border: 10px solid #f5bebe;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    .container {
        width: 9999px;
        position: absolute;
        left: 0px;
        img {
            display: block;
            float: left;
            height: 200px;
        }
    }
    
    .triangle {
        position: absolute;
        top: 80px;
        cursor: pointer;
        display: none;
        cursor: pointer;
        &.left-triangle {
            left: 0;
            transform: rotate(90deg);
        }
    
        &.right-triangle {
            right: 0;
            transform: rotate(-90deg);
        }
    }
    &:hover .triangle {
        display: block;
    }
    
    .dots {
        width: inherit;
        position: absolute;
        bottom: 10px;
        text-align: center;
        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #87837e;
            margin-right: 10px;
            cursor: pointer;
        }
    }
}
复制代码