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

安安静静
2,034 阅读7分钟

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

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

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

图片展示

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

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

首先是基本的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;，再来效果：

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

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;
}

好了现在提示圆点的工作区已经搭建好了，现在要给提示圆点一套新的装备了：

  1. 首先，固定包好提示圆点的容器dots的位置：
.dots{
    width: inherit;
    position: absolute;
    bottom: 10px;
    text-align: center;
}

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

  1. 设置提示圆点的样式：
.dots .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: orange;
    margin-right: 10px;
}

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

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

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

代码优化

  1. 为了提醒用户左右箭头和提示圆点都是可以进行点击的，当鼠标移动到这些图标上面时，鼠标箭头变成小手装：
cursor: pointer;

  1. 将CSS代码用.css文件引用到.html文件中;
<link rel="stylesheet" href="../styles/demo1.css">
  1. 将复用的样式代码提出来，作为公用的样式；
  2. 改变一下边框和圆点颜色等。

最终代码如下：

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;
        }
    }
}
avatar
文章
阅读
粉丝