【前端知识之JS】JS原生手写轮播图

饭啊饭°

已于 2022-08-03 09:34:29 修改

阅读量1.4k

点赞数 5

分类专栏：前端知识之JS 文章标签：前端 javascript css

于 2022-08-02 19:42:51 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/126121239

版权

本文详细介绍了如何使用原生JavaScript手写初级和优化版轮播图，包括功能分析、实现思路及代码展示。初级轮播图包含左右按钮、小球指示和自动播放功能，优化版增加了鼠标悬停显示按钮、连续滚动效果和缓动动画。

摘要由CSDN通过智能技术生成

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用原生JS手写轮播图。

一、手写初级轮播图

功能分析

初级轮播图功能介绍：①左右两端有左右按钮；②下方有小球指示当前是第几张图片；③无切换效果；④如果两秒中用户没有点击轮播图，则从左到右自动播放。
功能展示：

实现思路

HTML中需要包括一个大盒子class=wrap，为轮播图的盒子。一张一张的图片可以用无序列表存储，左右按钮使用button，下方圆点也用无序列表，并为每一个圆点设置计数器data-index。HTML的代码如下：

<div class="wrap">
    <ul class="list">
        <li class="item active">0</li>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
    <ul class="pointList">
        <li class="point active" data-index="0"></li>
        <li class="point" data-index="1"></li>
        <li class="point" data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
    </ul>
    <button class="btn" id="leftBtn"><</button>
    <button class="btn" id="rightBtn">></button>
</div>

CSS中，给wrap盒子一个宽高。list盒子和它同宽同高。每一张图片充满盒子，并且都用绝对定位固定在wrap盒子里，让他们有不同的颜色，初始透明度都是0即全透明，并且，哪个需要展示，哪个的z-index就变大，并且透明度改为1。左右按钮直接使用定位固定在左右两端，小圆点内部使用浮动，再用定位固定在下端。

* {
   
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 轮播图大盒子 */
.wrap {
   
    width: 800px;
    height: 400px;
    position: relative;
}
.list{
   
    width: 800px;
    height: 400px;
    position: relative;
}
/* 每一张图片 */
.item {
   
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
}
/* 不同的图片不同的颜色 */
.item:nth-child(1){
   
    background-color: skyblue;
}
.item:nth-child(2){
   
    background-color: yellowgreen
}
.item:nth-child(3){
   
    background-color: rebeccapurple;
}
.item:nth-child(4){
   
    background-color: pink;
}
.item:nth-child(5){
   
    background-color: orange;
}
.item.active {
   
    opacity: 1;
    z-index: 20;
}
/* 按钮的设置 */
.btn {
   
    width: