实现轮播的原生js

淩亂°似流年 2022-12-29 09:59 82阅读 0赞

### 文章目录 ###

*  前言
 *  一、轮播图是什么？
 *  二、代码
 *   *  1.html
     *  2.css
     *  3.js
 *  总结

--------------------

# 前言 #

小韩同学昨天去面试前端开发工程师的时候，面试官让我用原生js写一个轮播图，由于最近都是用框架写项目，原生的都不太记得了。回来之后查了一下资料，写了一个简单的。

--------------------

# 一、轮播图是什么？ #

任何的一个网站，一个网页，都会出现一个轮播图。而轮播图的基本功能有自动切换下一张图片，通过点击左右按钮切换以及点击下方的状态指示器（小圆点）切换。

# 二、代码 #

## 1.html ##

首先要搭建一个基础页面  
代码如下：

为了效果好看一点，轮播图的主图最好选用相同大小的图片  
效果如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]

## 2.css ##

代码如下：

*{ 
    	margin: 0;
    	padding: 0;
    }
    #container{ 
    	position: relative;
    	overflow: hidden;
    }
    /* 图片 */
    #banner{ 
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    #banner li{ 
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    #banner li img{ 
    	display: block;
    	
    }
    /* 状态指示器 */
    #status-indicator{ 
    	position: absolute;
    	width: 100px;
    	height: 10px;
    	bottom: 20px;  
    	left: 50%; 
    	z-index: 100;
    }
    #status-indicator span{ 
    	cursor: pointer;
    	width: 10px;
    	height: 10px;
    	border-radius: 50%;
    	background: #fff;
    	float: left;
    	margin-right: 20px;
    }
    #status-indicator .on{ 
    	background: orange;
    }
    /* 左右按钮 */
    .button img{ 
        cursor: pointer;
        display: none;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: 200;
        top: 180px;
    }
    #prev img{ 
        left: 20px;
    }
    #next img{ 
        right: 20px;
    }
    #container:hover .button img{ 
         display: block;
     }

--------------------

## 3.js ##

在写js前要知道自己要实现什么效果，我要实现的效果有：

1.  鼠标悬停在图片上时，图片自动轮播停止，左右按钮显示
2.  鼠标移出，图片自动轮播，左右按钮隐藏
3.  图片下方的小圆点随图片而变化
4.  点击小圆点切换图片

代码如下：

效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]

# 总结 #

以上是我用原生js写的轮播图。  
虽然现在有很多流行的前端框架，但是原生js也要好好掌握。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b74f74e0523b4fc9860623985aa7581d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201222140108989.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA==,size_16,color_FFFFFF,t_70#pic_center